text-decoration-thickness
텍스트 장식선(밑줄, 취소선 등)의 두께를 제어합니다. 기본 밑줄보다 두껍거나 얇은 장식선을 만들 때 사용합니다.
클래스 목록
패턴: tdt{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
tdt1px | text-decoration-thickness: 1px | 1px 두께 (얇은 밑줄) |
tdt2px | text-decoration-thickness: 2px | 2px 두께 |
tdt3px | text-decoration-thickness: 3px | 3px 두께 |
tdt4px | text-decoration-thickness: 4px | 4px 두께 (굵은 강조) |
tdt0-2rem | text-decoration-thickness: 0.2rem | 0.2rem 두께 |
시각적 비교
1px — tdt1px
Decoration thickness
2px — tdt2px
Decoration thickness
3px — tdt3px
Decoration thickness
4px — tdt4px
Decoration thickness
사용 예시
<!-- 얇은 밑줄 -->
<a href="#" class="tdu tdt1px c38BDF8">얇은 밑줄 링크</a>
<!-- 굵은 밑줄 강조 -->
<span class="tdu tdt4px">굵은 밑줄로 강조</span>
<!-- 호버 시 두께 변화 -->
<a href="#" class="tdu tdt1px hover-tdt3px tall200msease c38BDF8">
호버하면 밑줄이 두꺼워짐
</a>팁 & 주의사항
text-decoration 필수
tdu, tdlt 등 장식선이 활성화되어 있어야 두께가 적용됩니다.