CSS Text & Fonts
CSS Text Decoration
The CSS Text Decoration property is used to add or remove decorative lines from text.
It is commonly used to:
- Underline text
- Add overlines
- Strike through text
- Remove underlines from links
Text decoration helps emphasize content and improve the visual appearance of web pages. The supporting concepts are explained in CSS Pseudo Classes and Accessible CSS.
Syntax
CSS Text Decoration Syntax
css
selector {
text-decoration: value;
}CSS Text Decoration Example
css
h1 {
text-decoration: underline;
}This adds an underline below all <h1> elements.
Attributes
| Value | Description | Example |
|---|---|---|
| none | Removes decoration | text-decoration: none; |
| underline | Adds a line below the text | text-decoration: underline; |
| overline | Adds a line above the text | text-decoration: overline; |
| line-through | Adds a line through the text | text-decoration: line-through; |
| underline overline | Applies multiple decorations | text-decoration: underline overline; |
Decoration belongs to the text
Modern text decoration separates line, color, style, and thickness. Use text-underline-offset to keep an underline clear of glyphs and text-decoration-skip-ink when supported to improve legibility. Links should remain identifiable without relying only on color, and removing their underline requires another consistent visual cue in every interaction state.
Example
CSS Text Decoration Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Decoration Example</title>
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.no-decoration {
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="underline">Underlined Heading</h1>
<p class="overline">This paragraph has an overline.</p>
<p class="line-through">This text has a line through it.</p>
<a href="#" class="no-decoration">Link Without Underline</a>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| text-decoration | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Links (
) are underlined by default in most browsers. text-decoration: none;is commonly used to remove link underlines.- Multiple decorations can be combined.
- Modern CSS also supports
text-decoration-color,text-decoration-style, andtext-decoration-thickness. - Text decoration affects only the appearance of text, not its functionality.
Conclusion
The CSS Text Decoration property allows you to add visual emphasis to text through underlines, overlines, and strike-through effects. It is especially useful for styling links and highlighting important content while maintaining a clean and professional design.