What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Use CSS text-decoration to add an underline, overline, or line-through—and to control its color, style, and thickness. For example, text-decoration: underline wavy red; creates a red wavy underline. Two details matter: a child cannot erase a line drawn by its parent, and underline placement and ink skipping use separate properties.
What does text-decoration do?
text-decoration is a shorthand for four properties: text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness. MDN describes it as setting “the appearance of decorative lines on text.” MDN Web Docs: text-decoration
The line determines what is drawn: underline, overline, or line-through. The style determines how it looks: solid, double, dotted, dashed, or wavy. You can combine line, style, color, and thickness in one declaration; the order of these values is flexible.
How do you underline, strike through, or style text?
Apply the property to the element containing the text. These examples show common patterns:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.link-like {
text-decoration: underline;
}
.warning {
text-decoration: underline wavy red;
}
.deleted {
text-decoration: line-through;
}
.double-rule {
text-decoration: underline overline;
}
.custom {
text-decoration: solid underline purple 4px;
}A thickness can be a length, such as 4px, or a percentage; the property also supports documented keywords. Use the line types together when you need more than one, as in underline overline. For reusable styles or when you want every component to be explicit, use the longhands instead:
.custom-link {
text-decoration-line: underline;
text-decoration-color: purple;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
}The shorthand is compact; longhands make each setting easier to inspect or adjust independently. The shorthand also accepts global CSS values, including inherit, initial, revert, revert-layer, and unset.
Why can’t a child remove its parent’s underline?
text-decoration is not inherited in the usual CSS sense, but a decoration created on an ancestor is drawn across descendant text. That means text-decoration: none on a child does not cancel the parent’s underline; it only prevents the child from adding its own decoration.
.parent {
text-decoration: underline;
}
.parent .child {
text-decoration: none; /* Does not erase the parent's underline */
}If the line should not cross a particular phrase, put the underline on the specific text that needs it rather than on a containing element that also wraps the phrase. A child can add another decoration, but it cannot remove the ancestor’s drawn line. MDN Web Docs: text-decoration
Free tools Windows power users keep installed
One-click scans. No signup required.
How do you adjust underline placement and ink skipping?
Two useful controls are not part of the text-decoration shorthand. text-underline-offset adjusts the underline’s position relative to the font metrics. text-decoration-skip-ink controls whether underlines and overlines are interrupted near parts of glyphs that extend into the line.
.readable-underline {
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-skip-ink: auto;
}text-decoration-skip-ink: auto lets the browser decide whether to interrupt the line near glyphs. none draws continuously through those areas; all requires interruptions. These settings change how the line is rendered, not which line type the shorthand selects. MDN Web Docs: text-decoration-skip-ink and MDN Web Docs: CSS text decoration
Rank #4
How should you use text decoration accessibly?
- Keep a recognizable visual cue for links. Underlines are familiar link indicators, and removing them can make links harder to identify.
- Do not use decoration color alone to convey a state; pair it with another clear cue, such as wording, a line style, or an icon.
- When a line-through marks removed text or an old price, provide enough context for readers to distinguish the previous information from the current information.
Color, style, and thickness can help distinguish emphasis without relying on color alone. MDN Web Docs: CSS text decoration
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Is text-decoration supported in browsers?
MDN describes the core property as widely available across devices and browser versions since July 2015, while noting that support varies for some parts. That broad statement is not a guarantee that every value or related property works identically in every browser. If a specific style, thickness, or ink-skipping behavior is essential, check current compatibility information for that feature and the browsers you support. MDN Web Docs: text-decoration
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
