CSS text-decoration-line Property

The text-decoration-line CSS property specifies which decoration lines are to be drawn on an element’s text. It is the declarative control that tells the rendering engine to paint one or more lines associated with the text box rather than changing the box’s layout or the glyph shapes themselves. Because the effect is a painting instruction, it typically does not directly alter text metrics or line-height; instead it is layered on top of (or sometimes beneath) the glyphs during the painting phase of rendering.

In practical use, text-decoration-line is most often combined with complementary properties that control the decoration’s appearance and placement. For example, you would commonly use it together with the shorthand text-decoration as well as the appearance-related properties text-decoration-color, text-decoration-style, and text-decoration-thickness to tune color, stroke style, and thickness. These properties separate the semantic decision of “which lines” from the visual details of “how those lines look,” which makes styling more modular and easier to maintain.

Because decorations are painted and not inherited in the same way as many typographic properties, they interact with nested content in a nuanced way: a decoration applied to a container can visually extend across its inline-level descendants unless those descendants override the decoration properties. Engines also implement heuristics to avoid ugly collisions with glyphs (for example via the behavior controlled by text-decoration-skip-ink) and to allow explicit adjustments of vertical placement (for finer control one can use text-underline-offset). That means when you design typographic effects with text-decoration-line, you should consider both the decoration’s semantic role and how it will visually interact with nearby text and inline elements.

Finally, text-decoration-line supports composing multiple decoration lines simultaneously, and these can be animated or transitioned as part of visual effects (subject to what the user agent supports for painting and compositing). Because decorations are part of the painting layer, animating their color, thickness, or vertical offset is often visually cheaper than reflowing text. However, be mindful of accessibility and semantic meaning: decorations are commonly used to indicate links and deletions, so changing them purely for decorative purposes should still preserve the clarity and affordances users expect.