text-decoration-thickness 속성 사용법

text-decoration-thickness 속성은
텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 두께(굵기)를 설정합니다.

알아두세요!
해당 속성은 이전에 text-decoration-width로 불렸지만, 2019년에 text-decoration-thickness로 업데이트되었습니다.

CSS 데모: text-decoration-thickness 데모 버튼을 클릭해 보세요!

정의와 구문

CSS 
selector {
    text-decoration-line: underline;
    text-decoration-thickness: /* value */
}
text-decoration-thickness 속성의 정의
초깃값 auto
적용 요소 모든 요소
상속 아니오

값

text-decoration-thickness 속성 값
auto 브라우저가 텍스트 장식 선의 적절한 너비를 선택하도록 하는 값입니다.
length 텍스트 장식 선의 두께를 length(길이) 값으로 지정하는 것으로, 폰트 파일의 제안이나 브라우저의 기본 값을 무시합니다.
from-font 폰트 파일에 선호하는 두께 정보가 포함되어 있는 경우 해당 값으로 사용하고, 폰트 파일에 이 정보가 포함되어 있지 않은 경우에는 브라우저가 적절한 두께를 선택하도록 동작하는 값을 나타냅니다.

예제

HTML 
<p>텍스트 데코레이션 두께가 5px입니다.</p>
CSS 
p {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: solid;
    text-decoration-thickness: 5px;
}
CSS text-decoration-color 속성
CSS text-decoration-style 속성
실제 적용 모습

브라우저 호환성

text-decoration-thickness 속성에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
text-decoration-thickness 89 89 70 12.1

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

text-decoration-thickness 속성에 대한 percentage 값의 브라우저 호환성
값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
percentage 87 87 74 17.4

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

명세서

text-decoration-thickness 속성에 대한 명세서 사양
명세서 사양
Property CSS Text Decoration Module Level 4
#text-decoration-width-property

참고문헌

같이 보기