text-decoration

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Thetext-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for thetext-decoration-line andtext-decoration-style properties.

The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared.

The paint order of the text decoration, i.e., the fill and stroke, is determined by the value of thepaint-order attribute at the point where the text decoration is declared.

Note:As a presentation attribute,text-decoration also has a CSS property counterpart:text-decoration. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

html,body,svg {  height: 100%;}

html

<svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg">  <text y="20" text-decoration="underline">Underlined text</text>  <text x="0" y="40" text-decoration="line-through">Struck-through text</text></svg>