text-decoration
Lines on text: underline, strikethrough, overline.
Syntax
text-decoration: line style color thickness;Values
| Parameter | Type | Description |
|---|---|---|
| none | keyword | No line — often used for links. |
| underline | line-through | overline | keyword | Under, through or above the text. |
| solid | wavy | dotted | dashed | keyword | The line style. |
| color | color | The line color; by default it matches the text. |
Examples
Removing, crossing out and wavy underline:
<p><a href="#" style="text-decoration: none;">A link without underline</a></p>
<p style="text-decoration: line-through;">$40</p>
<p style="text-decoration: underline wavy crimson;">A spelling mistake</p>Thickness and offset of an underline:
<style>
a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
</style>
<p><a href="#">A neat underline with a gap</a></p>Notes
If you remove the underline from links inside text, make them stand out some other way — by color alone they are hard to notice for people with color blindness.
See also
- text-transform — Changes the case of letters on display.
- color — The color of the text (and the default color of borders and SVG icons).
- <a> — A link to another page, a file or a place on the page.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.