How to underline text and style the underline
Short answer
text-decoration: underline turns the underline on:
<p style="text-decoration: underline;">Underlined text</p>Styling the line
The color, thickness, style and distance from the text can be set separately:
<style>
.fancy { text-decoration: underline; text-decoration-color: tomato; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.wavy { text-decoration: underline wavy crimson; }
.dotted { text-decoration: underline dotted; }
</style>
<p class="fancy">Thick tomato underline</p>
<p class="wavy">Wavy like a spelling error</p>
<p class="dotted">Dotted underline</p>text-underline-offset moves the line away from the letters so it does not cross the tails of "g" and "y".
Links
A link's underline is usually not removed entirely but made subtler and brighter on hover:
<style>
.link { color: navy; text-decoration-color: lightsteelblue; text-underline-offset: 3px; }
.link:hover { text-decoration-color: navy; }
</style>
<a class="link" href="https://example.com">Read more</a>Common mistake
Underlining normal text that is not a link. People expect underlined text to be clickable and will try to click it. For emphasis use bold or color, and keep underlines for links.
Functions used in this recipe
- text-decoration — Lines on text: underline, strikethrough, overline.
- <a> — A link to another page, a file or a place on the page.
- :hover — Matches an element while the mouse pointer is over it.