text-underline-offset 속성 사용법

text-underline-offset 속성은
text-decoration: underline;의 간격 띄우기(오프셋, offset)를 설정합니다.

CSS text-decoration 속성
CSS 데모: text-underline-offset 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    text-decoration: underline;
    text-underline-offset: /* value */;
}

형식 정의

text-underline-offset 속성의 형식 정의
초깃값 auto
적용 요소 모든 요소
상속 예

값

text-underline-offset 속성 값
auto 브라우저가 밑줄에 적절한 간격 띄우기를 선택합니다.
length 밑줄의 간격 띄우기를 length(길이) 값으로 지정하여 글꼴 파일 제안 및 브라우저 기본값을 재정의합니다. 간격 띄우기는 글꼴 크기에 따라 크기가 조정되도록 em 단위를 사용하는 것이 좋습니다.

length 값이 양수일 경우에는 바깥쪽으로, 음수일 경우에는 안쪽으로 간격 띄우기를 합니다.

밑줄의 간격 기준(영점 위치)는 아래에서 자세히 설명하는 text-underline-position의 값에 따라 달라집니다.

CSS text-underline-position 속성
text-underline-position 속성 값에 따른 text-underline-offset의 간격 기준
text-underline-position 값간격 기준(영점 위치)
auto 알파벳 기준선(baseline)
from-font 글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용. 글꼴 파일에 이 정보가 포함되어 있지 않으면 알파벳 기준선(baseline)
under 텍스트 아래 가장자리
left 세로 쓰기 모드에서 텍스트 왼쪽 가장자리
right 세로 쓰기 모드에서 텍스트 오른쪽 가장자리

예제

CSS 
p {
    font-size: 1.3em;
    text-decoration: underline;
    text-underline-position: under;
    text-underline-offset: 0;
}
HTML 
<p>ABCDEF ghijklm 가나다라 12345</p>
실제 적용 모습 밑줄의 간격 기준(영점 위치)가 텍스트 아래 가장자리입니다.

브라우저 호환성

text-underline-offset 속성에 대한 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-underline-offset 87 87 70 12.1
퍼센트(%) 값 87 87 74 18.2

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

text-underline-offset 속성에 대한 명세서 사양
명세서 사양
text-underline-offset CSS Text Decoration Module Level 4
#underline-offset

참고문헌

같이 보기