text-emphasis-position
속성 사용법
text-emphasis-position
속성은
text-emphasis-style
로 지정된 요소의 텍스트 강조 표시 위치을 설정합니다.
주의하세요!
text-emphasis-position
속성은 단축 속성인 text-emphasis
속성으로 재설정할 수 없습니다.
텍스트 강조 표시 위치는 over right 입니다.
형식 구문
selector {
text-emphasis-style: dot;
text-emphasis-position: [ over | under ] && [ right | left ]?;
/*
[ over | under ]
텍스트 강조 표시의 수직 위치를 지정하는 부분으로,
"over" 또는 "under" 중 하나를 선택합니다.
이 부분은 `필수` 사항입니다.
[ right | left ]?:
텍스트 강조 표시의 수평 위치를 지정하는 부분으로,
"right" 또는 "left" 중 하나를 선택할 수 있습니다.
이 부분은 `선택` 사항입니다.
지정하지 않을 경우 초깃값인 "right"가 적용됩니다.
*/
}
형식 정의
초깃값 | over right |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
값
over |
가로 쓰기 모드에서 텍스트 위에 표시를 그립니다. |
---|---|
under |
가로 쓰기 모드에서 텍스트 아래에 표시를 그립니다. |
right |
세로 쓰기 모드에서 텍스트 오른쪽에 표시를 그립니다. |
left |
세로 쓰기 모드에서 텍스트 왼쪽에 표시를 그립니다. |
over
| under
가로 쓰기 모드에서 텍스트 강조 표시의 수직 위치를 지정하는 부분으로, over
값은 텍스트 위에 표시를 그리고, under
값은 텍스트 아래에 표시를 그립니다.
이 부분은 필수 사항입니다. 초깃값은 over
입니다.
right
| left
세로 쓰기 모드에서 텍스트 강조 표시의 수평 위치를 지정하는 부분으로, right
값은 텍스트 오른쪽에 표시를 그리고, left
값은 텍스트 왼쪽에 표시를 그립니다. 세로 쓰기 모드를 사용하는 아시아권 언어(한국어, 일본어, 중국어, 몽골어 등)에서 사용되는 텍스트 강조 표시를 제어하기 위해 고안되었습니다.
이 부분은 선택 사항입니다. 초깃값은 right
입니다.
예제
[ right
| left
]는 선택 사항으로 생략 가능
p span {
text-emphasis-style: '하';
text-emphasis-color: red;
text-emphasis-position: under; /* [ right | left ]는 선택 사항으로 생략 가능함 */
font-size: 1.5em;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
세로 쓰기 모드
p span {
writing-mode: vertical-rl; /* 세로 쓰기 모드 */
text-emphasis-style: '하';
text-emphasis-color: red;
text-emphasis-position: over left;
font-size: 1.5em;
}
<p>텍스트에 <span>강조 표시</span>가 있습니다.</p>
텍스트에 강조 표시가 있습니다.
주의할 점
right
| left
]를 사용할 경우 반드시 [ over
| under
] 값이 지정되어 있어야 합니다. 그렇지 않을 경우 적용되지 않습니다.
p span {
writing-mode: vertical-rl; /* 세로 쓰기 모드 */
text-emphasis-style: '하';
text-emphasis-color: red;
text-emphasis-position: left; /* 적용 안 됨 */
font-size: 1.5em;
}
left
값이 적용되지 않았습니다.
텍스트에 강조 표시가 있습니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
text-emphasis-position
|
99 | 99 | 46 | 7 |
명세서
명세서 사양 | |
---|---|
text-emphasis-position
|
CSS Text Decoration Module Level 3 #text-emphasis-position-property |