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.
The text-decoration attribute defines whether text is decorated with an underline, overline and/or strike-through. It is a shorthand for the text-decoration-line and text-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 the paint-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
<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>
Usage notes
| Value |
<'text-decoration-line'>
||
<'text-decoration-style'>
||
<'text-decoration-color'>
|
|---|---|
| Default value | See individual properties |
| Animatable | Yes |
For a description of the values, please refer to the CSS text-decoration property.
Specifications
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-decoration-property |
| Scalable Vector Graphics (SVG) 2 # TextDecorationProperties |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- CSS
text-decorationproperty