文字與排版
文字裝飾text-decoration
Setting the appearance of decorative lines on text.
Overview
| Class | Declarations |
|---|---|
text-decoration:none | -webkit-text-decoration: none;
text-decoration: none;
|
underline | text-decoration: underline;
|
line-through | text-decoration: line-through;
|
overline | text-decoration: overline;
|
text-decoration:<line>|<color>|<style>|<thickness> | -webkit-text-decoration: <line> <color> <style> <thickness>;
text-decoration: <line> <color> <style> <thickness>;
|
Examples
Set a complete decoration
Use text-decoration:*|*|*|* when line, color, style, and thickness should be declared together.
<a class="text-decoration:underline|blue-60|wavy|2px"> Decorated link</a>Generated CSS
@layer theme { :root { --color-blue-60: oklch(51.83% .2687 266.1) }}@layer utilities { .text-decoration\:underline\|blue-60\|wavy\|2px { -webkit-text-decoration: underline var(--color-blue-60) wavy 2px; text-decoration: underline var(--color-blue-60) wavy 2px }}Use line aliases
Use underline, line-through, or overline for common line-only decoration.
<a class="underline">Underlined link</a>Remove decoration
Use text-decoration:none when inherited link decoration should be removed deliberately.
<a class="text-decoration:none">Plain link</a>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<a class="underline:hover text-decoration:none@sm text-decoration:none@print">...</a>