CSS 라이브 데모: text-emphasis-position 데모 버튼을 클릭해 보세요!
/*
    [ over | under ]
    텍스트 강조 표시의 수직 위치를 지정하는 부분으로,
    "over" 또는 "under" 중 하나를 선택합니다.
    이 부분은 `필수` 사항입니다.
    
    [ right | left ]?:
    텍스트 강조 표시의 수평 위치를 지정하는 부분으로,
    "right" 또는 "left" 중 하나를 선택할 수 있습니다.
    이 부분은 `선택` 사항입니다.
    지정하지 않을 경우 초깃값인 "right"가 적용됩니다.
*/
selector {
    text-emphasis-position: [ over | under ] && [ 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>
실제 적용 모습
p span {
    writing-mode: vertical-rl; /* 세로 쓰기 모드 */
    text-emphasis-style: '하';
    text-emphasis-color: red;
    text-emphasis-position: left; /* 적용 안 됨  */
    font-size: 1.5em;
}
실제 적용 모습 세로 쓰기 모드에서 left 값이 적용되지 않았습니다.