정의 및 사용 방법

text-underline-offset 속성은
text-decoration으로 설정된 밑줄(underline)의 원래 위치에서 간격을 지정합니다.

이 속성을 사용하면 밑줄의 기준이 되는 원래 위치에서 간격을 늘리거나 줄일 수 있습니다.

기본 예제

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

형식 구문

CSS 
selector {
    text-underline-offset: 	auto | <length-percentage>
}

값

text-underline-offset 속성 값
auto 브라우저가 밑줄의 원래 위치 기준에서 적절한 간격 띄우기를 선택합니다.
length 밑줄의 원래 위치 기준에서 길이 값으로 간격을 지정합니다.
<percentage> 밑줄의 원래 위치기준에서 요소의 글자 크기인 1em의 백분율로 간격을 지정합니다.

length 값과 <percentage> 값이 양수일 경우 밑줄은 원래 위치 기준에서 텍스트의 바깥쪽에 맞춰 간격이 조정되며, 음수일 경우에는 안쪽에 맞춰 간격이 조정됩니다.

밑줄의 원래 위치 기준

text-underline-offset 속성은 text-decoration으로 설정된 밑줄(underline)의 원래 위치를 기준에서 간격을 지정합니다.

여기에서 말하는 밑줄의 원래 위치 기준은 text-underline-position 속성으로 지정된 밑줄의 기준 위치입니다.

text-underline-offset 속성의 0 값은 이 밑줄의 원래 위치 기준을 의미합니다.
다음의 표는 text-underline-position 속성으로 지정할 수 있는 밑줄의 원래 위치 기준 값입니다.

text-underline-position 속성으로 지정할 수 있는 밑줄의 원래 위치 기준 값
auto 브라우저는 자체 알고리즘을 사용하여 알파벳 기준선(baseline) 또는 알파벳 기준선 아래에 줄을 배치합니다.
from-font 글꼴 파일에 선호 위치에 대한 정보가 포함되어 있으면 이 값을 사용합니다. 글꼴 파일에 이 정보가 포함되어 있지 않으면 브라우저가 적절한 위치를 선택한 상태에서 자동으로 설정된 것처럼 행동합니다.
under 요소의 텍스트 내용 아래 가장자리(예를 들어, 밑줄이 알파벳의 g, j, p, q, j처럼 글자의 baseline 아래로 내려가는 문자의 아래 가장자리)에 위치합니다.
left 세로 쓰기 모드에서는 밑줄의 기준 위치는 under와 동일하지만 텍스트 왼쪽에 배치합니다.
가로 쓰기 모드에서는 auto 값과 동일합니다.
right 세로 쓰기 모드에서는 밑줄의 기준 위치는 under와 동일하지만 텍스트 오른쪽에 배치합니다.
가로 쓰기 모드에서는 auto 값과 동일합니다.

구문

CSS 
/* 단일 키워드 값 */
text-underline-offset: auto;

/* 길이 값 */
text-underline-offset: 0.1em;
text-underline-offset: -3px;

/* 백분율 값 */
text-underline-offset: 20%;

/* 글로벌 값 */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

형식 정의

text-underline-offset 속성의 형식 정의
초깃값 auto
적용 요소 모든 요소
상속 예
애니메이션 계산된 값

활용 예제

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

명세서

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

참고문헌

같이 보기