Text-decoration - Property CSS
Summary of characteristics of the text-decoration
property
none
| underline
| overline
| line-through
| blink
| spelling-error
| grammar-error
(1) text-decoration
is usable on an SVG file, except for text-decoration-color
(the color of the decorations).
(2) The inheritance mechanism is specific. See on this subject propagation mechanism.
Description of the text-decoration
property.
The property text-decoration
defines typographic decoration attributes, such as underline, strike through, etc.
These attributes can be used for decorative purposes, but also to highlight a part of the text, to bring out the modifications made to the text (deletion or insertion), or to indicate spelling, grammar, etc. errors.
Example of the main decorations:
text-decoration
is a short hand property that captures the values of the following properties:
text-decoration-line
: type of decoration: underlined, struck out, etc.text-decoration-thickness
: thickness of decorative line.text-decoration-style
: type of line for decoration: solid, dotted, etc.text-decoration-color
: color of the decorative line.
To which the property text-decoration-skip
should be added, which also concerns text decoration but is not included in text-decoration
,
as well as the property text-underline-position
.
Not specifying one of the values forces it to its initial value.
Adding a decoration to a text does not change the line spacing or the height of the lines.
This can affect readability with certain types of underlines such as wavy
or double
.
What do the decorations apply to?
The decorations are mainly applied to texts, they are not applied to images, nor to form fields although these elements are of the inline
type.
Example: Although the text of this element is underlined, the image next to it
is not underline.
Developments of the standard.
The ability to specify the stroke thickness has been added in level 4 of the Text Decoration
module. Level 3 only provided for 3 values.
The standard CSS 2.2
already provided a definition for text-decoration
but the property was not defined as a shorthand property:
it accepted a single value, corresponding to text-decoration-line
.
This syntax with a single value is compatible with the new standard CSS 3
, but do not forget that, as with all shorthand properties,
the values not present are set to their initial value:
text-decoration:underline;
⇔
text-decoration-line:underline;
text-decoration-thickness:auto;
text-decoration-style:solid;
text-decoration-color:currentColor;
Another development: the blink
value is no longer recognized by any browser. It produced a blinking effect on text.
A blinking effect is very different from an underline; there is no reason for the same property to manage these two features.
Furthermore, blinking is now considered intrusive.
It is still possible to make content blink, but by using an animation on the visibility or opacity of the element.
Some special cases.
Here are some complex scenarios for positioning decorative lines. Moreover, not all browsers will handle them the same way.
The decorations on a ruby structure.
The decorations applied to a Ruby container (tag ruby) are only propagated to the base text of the Ruby structure, that is to say the rb tag. However, it is possible to add a decoration to the annotation of a Ruby structure by applying it directly to the rt tag.
Particularities regarding the inheritance of text-decoration
.
The inheritance mechanism of the property text-decoration
is very specific: setting a value for the property text-decoration
on a child element
does not override the value inherited from the parent.
The example below draws a parallel between the inheritance of text-decoration
and classical inheritance as seen with the property color
.
It consists of a parent block, which contains 3 blocks, which will therefore be its children. A decoration and a color have been applied to the parent block.
The color is only there for comparison, to illustrate the mechanism of classical inheritance.
On the first child, nothing specific has been defined. The color is inherited from the parent, and the decoration also seems to be inherited, but we will see that it is not a usual inheritance.
On the second child, new values have been defined for the color and for the decoration. The new color indeed replaces the color that was inherited from the parent. However, we can see that, for the decoration, there has been a combination of the new value with the value inherited from the parent.
Regarding the third child, the color and decoration have been set to the value initial
.
The color has indeed returned to black. However, the parent's decoration continues to be applied.
Finally, child number 4 fares better by completely redefining the decor. In fact, they create a new decor on top of the one that comes from the parent.
So how can you cancel the inheritance of a decoration? It seems that this is not currently possible. The new property text-decoration-skip-self
should allow this, but for now, browsers do not take it into account.
There are also some tricks, but they may create layout issues:
- Set the element to absolute
or fixed
(property position
).
- Set the element to inline-block
(property display
).
Propagation on positioned elements.
In addition to this specific inheritance mechanism, it should be noted that decorations are not propagated to positioned elements (those whose property
position
is set to absolute
or fixed
), nor to elements whose property display
has been defined as
inline-block
or inline-table
.
For more information, refer to the description of these two properties: position
, display
.
Propagation on elements of the type inline-...
.
On the other hand, as can be seen in the example below, the propagation of decorations to child elements depends on their display type.
Decorations are propagated to child elements of type inline
or block
, but are not propagated to elements of type
code>inline-block, inline-table
, etc.
Inline
Inline-block
block
Examples with the text-decoration
property.
In this regard, you can consult the page on the selector
::spelling-error
, unfortunately still too little supported by browsers.
Unless one applies one of the decorations to a parent element and the second to a child element.
Animation of the text-decoration
property.
Refer to the individual properties for other examples of animation.
Browsers compatibility with text-decoration
.
In the compatibility table below, the first column corresponds to the shorthand property text-decoration
.
The following columns relate to the detailed properties introduced in version 4 of the specification.
text-decoration
syntax, which is now equivalent to text-decoration-line
.Text-decoration-line
property support.New syntax, from level 4 of the specification, defining the type of decoration line.
text-decoration-thickness
property to manage the thickness of decoration lines.text-decoration-color
property to manage the color of decoration strokes.Notes:
(1) Partial support because of the text-decoration-skip
property that is not supported or partially supported.
(2) Partial support due to unsupported or partially supported text-decoration-style
and text-decoration-skip
properties.
decoration
text-decoration
property
Text-decoration-line
property
text-decoration-thickness
property
text-decoration-color
property
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Edge

Safari

Opéra

Safari sur IOS

Androïd Brower

Firefox pour Androïd

Chrome

Firefox

Chrome pour Androïd

KaiOS Browser

Opéra mini
Historic of the text-decoration
property.
-
Cascading Style Sheets specification - Version 1
Initial definition of the code>text-decoration property, accepting the following values:none
,underline
,overline
,line-through
andblink
.November 17, 1995Working Draft.November 12, 1996Proposed for recommendation.December 17, 1996Recommendation .September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
Theinherit
value is accepted by thetext-decoration
property.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Text Decoration Module Level 3
text-decoration
comes as a shorthand property fortext-decoration-line
,text-decoration-style
andtext-decoration-color
.
Note: theblink
value is declared obsolete in favor of the possibilities offered by animations.January 27, 1999Working Draft.August 01, 2013Candidate Recommendation. -
CSS Text Decoration Module Level 4
Addition of the propertyline-decoration-thickness
to the properties managed bytext-decoration
.
spelling-error
andgrammar-error
values are added for line styles.March 13, 2018Working Draft.
See also, regarding text decorations.
Text decorations are described in the CSS Text Decoration Module. The property text-decoration
is part of this module along with the following:
Properties:
















