text-decoration-line

text-decoration-line 유틸리티는 텍스트에 어떤 꾸밈선(밑줄, 윗줄, 취소선 등)을 그릴지를 결정해 줘요.

출처: 문서

본문

클래스	CSS
`underline`	`text-decoration-line: underline;`
`overline`	`text-decoration-line: overline;`
`line-through`	`text-decoration-line: line-through;`
`no-underline`	`text-decoration-line: none;`

텍스트에 밑줄 긋기 (Underlining text)

underline 유틸리티를 사용하면 요소의 텍스트에 밑줄을 추가할 수 있어요:

<p class="underline">The quick brown fox...</p>

텍스트에 윗줄 그리기 (Adding an overline to text)

overline 유틸리티를 사용하면 요소의 텍스트에 윗줄을 추가할 수 있어요:

<p class="overline">The quick brown fox...</p>

텍스트에 취소선 긋기 (Adding a line through text)

line-through 유틸리티를 사용하면 요소의 텍스트에 취소선을 추가할 수 있어요:

<p class="line-through">The quick brown fox...</p>

텍스트에서 선 제거하기 (Removing a line from text)

no-underline 유틸리티를 사용하면 요소의 텍스트에서 선을 제거할 수 있어요:

<p class="no-underline">The quick brown fox...</p>

hover 시 적용하기 (Applying on hover)

text-decoration-line 유틸리티에 hover:* 같은 변형을 붙이면 해당 상태에서만 유틸리티가 적용돼요:

텍스트 위에 마우스를 올려 기대했던 동작을 확인해 보세요.

<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>

반응형 디자인 (Responsive design)

text-decoration-line 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<a class="no-underline md:underline ..." href="...">
  <!-- ... -->
</a>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.