정의 및 사용 방법

text-emphasis-color 속성은
text-emphasis-style로 지정된 요소의 텍스트 강조 표시 색상을 지정합니다.

이 속성을 사용하면 텍스트 색상 이외에도 강조 표시의 색상을 자유롭게 지정할 수 있습니다.

색상을 명시적으로 지정하지 않으면 강조 표시 색상은 기본적으로 텍스트 자체의 계산된 현재 색상으로 표시됩니다.

기본 예제

CSS 라이브 데모: text-emphasis-color 데모 버튼을 클릭해 보세요!

참고 사항 - 관련 속성들

강조 표시 색상을 설정하는 text-emphasis-color 속성 이외에도 텍스트의 강조 표시 스타일과 관련된 속성들이 있습니다.
다음의 속성들과 함께 사용하면 텍스트 강조 표시를 좀 더 다양하게 스타일링할 수 있습니다.

text-emphasis-style의 관련 속성들
text-emphasis-style 강조 표시 모양을 설정합니다.
text-emphasis 강조 표시 모양과 색상을 한 번에 설정할 수 있는 단축 속성입니다.
text-emphasis-position 강조 표시 위치을 설정합니다.

형식 구문

CSS 
selector {
    text-emphasis-color: <color>
}

값

text-emphasis-color 속성 값
<color> 색상 값

구문

CSS 
/* <color> 값 */
text-emphasis-color: currentcolor;
text-emphasis-color: red;
text-emphasis-color: #00a0e9;
text-emphasis-color: rgb(255, 255, 128);
text-emphasis-color: rgba(255, 255, 128, 0.5);
text-emphasis-color: transparent;

/* 글로벌 값 */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: revert-layer;
text-emphasis-color: unset;

형식 정의

text-emphasis-color속성의 형식 정의
초깃값 currentcolor (현재 글자색)
적용 요소 모든 요소
상속 예
애니메이션 예

활용 예제

CSS 
p span {
    text-emphasis-style: triangle;
    text-emphasis-color: red;
}
HTML 
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
실제 적용 모습

브라우저 호환성

text-emphasis-color 속성에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-emphasis-color 99 99 46 7

명세서

text-emphasis-color 속성에 대한 명세서 사양
명세서 사양
text-emphasis-color CSS Text Decoration Module Level 4
#text-emphasis-color-property

참고문헌

같이 보기