What Is Text Decoration in CSS
The CSS text decoration module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. Text decoration features can provide visual cues for spelling errors, grammar issues, and links. These features help improve the usability, accessibility, functionality, and aesthetics of text content across web interfaces.
Text decorations are drawn across descendant text elements. If an element specifies a text decoration, a child element cannot remove the decoration. For example, when applying text-decoration: underline to a paragraph, the entire paragraph including all child elements receives the underline. While a child element can add additional decorations, it cannot remove decorations applied by ancestors.
Our web development services incorporate these CSS techniques to create accessible, user-friendly interfaces that communicate effectively with all visitors.
The Text Decoration Shorthand
The text-decoration property serves as a shorthand for setting multiple text decoration properties simultaneously. This shorthand combines text-decoration-line, text-decoration-color, text-decoration-style, and the newer text-decoration-thickness property into a single declaration.
/* Basic underline */
text-decoration: underline;
/* Colored and styled underline */
text-decoration: wavy underline overline red 2px;
text-decoration-line: Choosing Decoration Types
The text-decoration-line property specifies the type of line decoration to apply to text. This foundational property determines whether text receives an underline, overline, strikethrough, or combinations thereof.
Line Type Values
| Value | Description |
|---|---|
underline | Adds a decorative line beneath text |
overline | Places a decorative line above text |
line-through | Draws a line through the middle of text |
none | Removes all text decorations |
spelling-error | Browser-defined spelling error indicator |
grammar-error | Browser-defined grammar error indicator |
Multiple Decoration Lines
Multiple decoration lines can be combined:
text-decoration-line: underline overline;
text-decoration-line: underline line-through;
These techniques are commonly used in our web development projects to create clear visual hierarchies and improve user experience.
1/* Underline - common for links */2.underline {3 text-decoration-line: underline;4}5 6/* Overline - editorial annotations */7.overline {8 text-decoration-line: overline;9}10 11/* Strikethrough - deleted content */12.strikethrough {13 text-decoration-line: line-through;14}15 16/* Multiple decorations */17.double-decoration {18 text-decoration-line: underline overline;19}20 21/* Remove inherited decoration */22.no-underline {23 text-decoration-line: none;24}text-decoration-style: Line Style Options
The text-decoration-style property controls the visual appearance of decorative lines beyond their position and color. The default style is solid, creating a continuous straight line.
Style Values
- solid: Continuous, unbroken line (default)
- dashed: Short, separated segments
- dotted: Circular dots
- double: Two parallel lines
- wavy: Undulating sine-wave pattern
Error State Styling
Wavy underlines strongly indicate errors or warnings:
.error {
text-decoration: wavy underline red;
}
Implementing these patterns in your web development strategy ensures users receive clear visual feedback for interactive elements and form validation states.
Advanced Positioning Controls
text-underline-offset
Controls the distance between the text baseline and the underline decoration:
/* Adjust underline position */
.adjusted-underline {
text-decoration: underline;
text-underline-offset: 4px;
}
Positive values move the underline further below the text, improving clearance above descenders.
text-decoration-skip-ink
Controls whether lines are interrupted over glyph descenders:
/* Skip line over descenders for readability */
.readable {
text-decoration-skip-ink: auto;
}
/* Draw line through all glyphs */
.continuous {
text-decoration-skip-ink: none;
}
For international websites, these positioning controls are essential for adapting text decorations to different writing systems and cultural expectations.
Complete overview of all text decoration CSS properties
text-decoration
Shorthand combining line, color, style, and thickness properties
text-decoration-line
Specifies decoration type: underline, overline, line-through, none
text-decoration-color
Sets the color of the decorative line (default: currentcolor)
text-decoration-style
Defines line pattern: solid, dashed, dotted, double, wavy
text-decoration-thickness
Controls line weight in pixels or relative units
text-underline-offset
Adjusts underline distance from text baseline
text-decoration-skip-ink
Controls line interruption over descenders for readability
text-underline-position
Sets underline position relative to baseline for international text
Internationalization and Cultural Considerations
Text decoration conventions vary across writing systems and cultures:
- Western typography: Underlines placed close to the baseline
- Japanese/Korean typography: Underlines positioned further below the text
- Asian emphasis marks: Use text-emphasis properties for dot and sesame marks
The CSS text decoration module provides properties to adapt styling to cultural norms, ensuring appropriate presentation for international audiences. Our web development services include localization expertise to adapt designs for global markets.
Frequently Asked Questions
How do I remove the underline from links but keep it on hover?
Use `text-decoration: none;` for the default state, then apply `text-decoration: underline;` on `:hover`. Combining with color and other visual cues ensures links remain identifiable.
What is the difference between text-decoration and border-bottom?
Text decoration is drawn by the browser across the entire element including inline descendants. Border-bottom creates a box-model border that doesn't affect inline elements in the same way and can be styled more flexibly.
Can I animate text decoration properties?
text-decoration-color and text-decoration-thickness can be animated in supporting browsers. The line type (text-decoration-style) cannot be animated directly.
Why should I use text-decoration-skip-ink?
Skip-ink improves readability by preventing lines from crossing through descenders. This is especially important for users with dyslexia or when using fonts with deep descenders.