정의 및 사용 방법
text-emphasis-color
속성은
text-emphasis-style
로 지정된 요소의 텍스트 강조 표시 색상을 지정합니다.
이 속성을 사용하면 텍스트 색상 이외에도 강조 표시의 색상을 자유롭게 지정할 수 있습니다.
색상을 명시적으로 지정하지 않으면 강조 표시 색상은 기본적으로 텍스트 자체의 계산된 현재 색상으로 표시됩니다.
기본 예제
텍스트 강조 표시 색상이 red입니다.
참고 사항 - 관련 속성들
강조 표시 색상을 설정하는 text-emphasis-color
속성 이외에도 텍스트의 강조 표시 스타일과 관련된 속성들이 있습니다.
다음의 속성들과 함께 사용하면 텍스트 강조 표시를 좀 더 다양하게 스타일링할 수 있습니다.
text-emphasis-style
|
강조 표시 모양을 설정합니다. |
---|---|
text-emphasis
|
강조 표시 모양과 색상을 한 번에 설정할 수 있는 단축 속성입니다. |
text-emphasis-position
|
강조 표시 위치을 설정합니다. |
형식 구문
selector {
text-emphasis-color: <color>
}
값
<color> |
색상 값 |
---|
구문
/* <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;
형식 정의
초깃값 | currentcolor (현재 글자색) |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
애니메이션 | 예 |
활용 예제
p span {
text-emphasis-style: triangle;
text-emphasis-color: red;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-emphasis-color
|
99 | 99 | 46 | 7 |
명세서
명세서 사양 | |
---|---|
text-emphasis-color
|
CSS Text Decoration Module Level 4 #text-emphasis-color-property |