A line under text can be a link indicator or a decorative accent, and those jobs call for different styling choices. To add an underline with CSS, start with text-decoration: underline; use a border when the line should belong to the element’s box instead of its text.
Add Underline CSS to Text
Apply a class to the text you want to mark:
<p>Read the <a class="guide-link" href="/guide">setup guide</a>.</p>
.guide-link {
text-decoration: underline;
}
Add underline CSS rules to the components that need a persistent link indicator. The selector targets the link and draws a line under its text. For a font with deep descenders, test the spacing as well as the color so letters remain easy to read. To underline a font, CSS adds a decoration to the rendered text; it does not modify the typeface itself. The same property works on a span or another text-bearing element. Scope the selector carefully so unrelated text does not acquire a line.
An underline in CSS normally follows the text across wrapped lines. This is particularly helpful for links in a paragraph: each line remains visibly associated with the linked words. A browser may already underline links by default, but an explicit rule gives the component a predictable style when other site styles are present.
Adjust Color, Style, Thickness, and Offset
The shorthand can set the line, style, color, and thickness together. Set the offset separately:
.guide-link {
text-decoration: underline solid #164a8a 2px;
text-underline-offset: 0.18em;
}
Use dotted, dashed, wavy, or double instead of solid when the design calls for it. The text-decoration-color, text-decoration-style, and text-decoration-thickness longhands let you adjust individual parts. text-underline-offset moves the line relative to its normal position; it is not part of the shorthand. An em offset scales with the element’s font size.
Check the result at the sizes and zoom levels people use. When adding a CSS underline, select a font and line thickness that remain clear together. A very thick line can crowd small text, while a large offset can make the line look disconnected. Choose a color that remains visible against the background. See the CSS text-decoration reference for the supported properties and values.
Remove a Line Carefully
To remove a decoration applied to a link itself, use:
.guide-link {
text-decoration: none;
}
This removes other text-decoration lines set by that shorthand too. If you only want to change part of a decoration, use the corresponding longhand. If the line still appears, inspect the matched rules and the element where it was introduced. A descendant cannot remove an underline drawn by an ancestor simply by setting none on itself; change the ancestor’s rule or restructure the markup.
Removing link underlines can make links hard to recognize within prose. Keep a clear visual distinction beyond color alone, and retain a visible keyboard focus indicator. For example, you can use an underline in the normal state and a distinct outline on :focus-visible. Do not remove the browser’s focus styling without providing an alternative.
Choose a Border for a Box Accent
A bottom border belongs to the element’s box. With an inline-block label, it can form a line below the whole box, including its padding:
.section-label {
display: inline-block;
padding-bottom: 0.25em;
border-bottom: 2px solid currentColor;
}
A border’s placement depends on box dimensions and padding, so it behaves differently from a text decoration when content wraps. Test the layout at narrow widths before using it as a link indicator. For a link embedded in a sentence, choose text-decoration so the line follows the words. For a section label with a line spanning its padded box, choose border-bottom.