text-decoration
Adds visual decorations (underline, strikethrough, etc.) to text. Used to remove default link underlines, show deleted prices, emphasis, etc.
Class List
| Class | CSS | Description |
|---|---|---|
tdn | text-decoration: none | Remove decoration. Most used for removing link underlines |
tdu | text-decoration: underline | Add underline. For emphasis, hover link indication |
tdo | text-decoration: overline | Add overline. For special designs |
tdlt | text-decoration: line-through | Strikethrough. For deleted prices, completed to-dos |
Visual Comparison
Compares each text-decoration value applied to the same text.
None — tdn
The quick brown fox jumps over the lazy dog
No decoration — displays same as default text
Underline — tdu
The quick brown fox jumps over the lazy dog
Underline displayed below the text
Overline — tdo
The quick brown fox jumps over the lazy dog
Line displayed above the text
Line-through — tdlt
The quick brown fox jumps over the lazy dog
Strikethrough displayed through center of text
Class Details
tdntext-decoration: none
Removes default text decorations. The most commonly used class, primarily for removing the default underline from <a> tags. Combining with hover-tdu to show underline only on hover is standard.
<!-- Remove link underline (most common usage) -->
<a href="/about" class="tdn c6366F1 hover-tdu">
About Us
</a>
<!-- Navigation link -->
<nav class="df gap2rem">
<a href="/" class="tdn cFAFAFA hover-c6366F1">Home</a>
<a href="/docs" class="tdn cFAFAFA hover-c6366F1">Docs</a>
<a href="/blog" class="tdn cFAFAFA hover-c6366F1">Blog</a>
</nav>tdutext-decoration: underline
Adds an underline to text. Used to emphasize text or clearly indicate links on hover.
<!-- Text emphasis -->
<p>In this sentence, <span class="tdu">the important part</span> is emphasized with an underline.</p>
<!-- Show underline on hover -->
<a href="#" class="tdn hover-tdu c6366F1">
Underline appears on mouse hover
</a>Preview
In this sentence, the important part is emphasized with an underline.
tdotext-decoration: overline
Adds a line above text. Rarely used in typical web UIs, but useful for special designs or mathematical notation.
<!-- Overline text -->
<span class="tdo cFAFAFA fs16px">Overline Text</span>Preview
Text with overline
tdlttext-decoration: line-through
Adds a strikethrough to text. Commonly used for deleted prices, completed to-do items, etc.
<!-- Discount price display -->
<div class="df aic gap12px">
<span class="tdlt c71717A fs16px">₩49,000</span>
<span class="cEF4444 fs2rem fw700">₩29,000</span>
</div>
<!-- Completed todo items -->
<ul class="lsn df fdc gap8px">
<li class="tdlt c71717A">Review design mockup</li>
<li class="tdlt c71717A">API integration test</li>
<li>Write deployment script</li>
</ul>Preview — Price comparison
Preview — Completed to-do
✓ Review design mockup
✓ API integration test
○ Write deployment script
Common Patterns
The most commonly used combination in link styling.
<!-- Styled link (most common pattern) -->
<a href="/page" class="tdn hover-tdu c6366F1">
Styled link
</a>
<!-- Card link -->
<a href="/product" class="tdn db bg18181B p2rem br8px hover-bg27272A tall200msease">
<h3 class="cFAFAFA fw600 mb8px">Product name</h3>
<p class="c71717A fs14px">Product description is displayed here.</p>
</a>
<!-- Price comparison -->
<div class="df aic gap12px">
<span class="tdlt c71717A fs14px">₩49,000</span>
<span class="cEF4444 fs2rem fw700">₩29,000</span>
<span class="bg34D399 c000000 py2px px8px br4px fs12px fw600">40% OFF</span>
</div>| Pattern | Usage |
|---|---|
tdn hover-tdu c6366F1 | Default link style — no underline, underline on hover |
tdn hover-tdu cFAFAFA | Navigation link — light text, hover underline |
tdn db hover-bg27272A | Card-style link — entire block is clickable |
tdlt c71717A fs14px | Deleted price — strikethrough + muted color |
tdlt c71717A | Completed to-do — strikethrough + muted color |
Tips & Notes
tdn is essential for almost all links
<a> tags display underlines by default. In most UIs, tdn removes the default underline, and hover-tdu adds hover underlines.
Price comparison pattern with tdlt
When displaying discounted prices, applying tdlt to the original price with a muted color (c71717A) is effective.
Accessibility Consideration
When using tdn on links, don't rely on color alone. Show underlines on hover/focus or ensure sufficient color contrast.