text-decoration-thickness
속성 사용법
text-decoration-thickness
속성은
텍스트에 사용되는 text-decoration-line
으로 지정된 선 장식의 두께를 설정합니다.
텍스트 데코레이션 두께를 변경합니다.
selector {
text-decoration-line: underline;
text-decoration-thickness: /* value */
}
text-decoration-thickness
속성의 정의와 구문
초기 값 | auto |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
text-decoration-thickness
속성 값
auto |
브라우저가 텍스트 장식 선의 적절한 너비를 선택하도록 하는 값입니다. |
---|---|
length |
텍스트 장식 선의 두께를 length (길이) 값으로 지정하는 것으로, 폰트 파일의 제안이나 브라우저의 기본 값을 무시합니다. |
from-font |
폰트 파일에 선호하는 두께 정보가 포함되어 있는 경우 해당 값으로 사용하고, 폰트 파일에 이 정보가 포함되어 있지 않은 경우에는 브라우저가 적절한 두께를 선택하도록 동작하는 값을 나타냅니다. |
예제
<p>텍스트 데코레이션 두께가 5px입니다.</p>
p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}
텍스트 데코레이션 두께가 5px입니다.
알아두세요!
해당 속성은 이전에 text-decoration-width
로 불렸지만, 2019년에 text-decoration-thickness
로 업데이트되었습니다.
text-decoration-thickness
속성에 대한 브라우저 호환성
속성 |
Chrome
|
Edge
|
Firefox
|
Safari
|
---|---|---|---|---|
text-decoration-thickness
|
89 | 89 | 70 | 12.1 |
마지막 업데이트 정보: 2023-09-12
값 |
Chrome
|
Edge
|
Firefox
|
Safari
|
---|---|---|---|---|
percentage
|
87 | 87 | 74 | 지원하지 않음 |
text-decoration-thickness
속성에 대한 명세서
명세서 사양 | |
---|---|
Property
|
CSS Text Decoration Module Level 4 #text-decoration-width-property |