typography
text-decoration
Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.
text-decoration: <line> || <style> || <color> || <thickness>Common values
| Value | Effect |
|---|---|
| none | Removes any decoration |
| underline | Draws a line below the text |
| line-through | Strike-through effect |
| overline | Draws a line above the text |
| underline dotted 2px | Combined line, style, and thickness |
Examples
a { text-decoration: underline; text-underline-offset: 3px; }Accessible link underline with breathing room
.price-old { text-decoration: line-through; }Strike-through for discounted prices
button { text-decoration: none; }Remove default underline on button links
Gotcha
Removing underlines on links reduces accessibility; keep a visual cue like color, weight, or hover state.
Related properties
color
Sets the foreground text color and inherits by default. Modern browsers support oklch() and color(display-p3) for wider-gamut design systems.
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.
text-align
Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.
font-size
Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.
font-family
Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.