Text-decoration - Property CSS

text-decoration

Summary of characteristics of the text-decoration property

Quick description
Summary property to define most of the text decoration parameters (color, type of line, etc.).
Status
Standard
Usable for
HTML, SVG (1)
Predefined values
none | underline | overline | line-through | blink | spelling-error | grammar-error
Percentages
Not applicable.
Initial value
See individual properties.
Inherited by default
See individual properties. (2)
Animation type
See individual properties.
W3C Module
CSS Text Decoration Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)

Document status: CR (Candidate Recommendation)

Document status: REC (Recommendation)

Document status: DEPR (Old specification, declared obsolete or superseded)

(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:

Underlined text   Overline text   Strike through text   Spelling mistake

text-decoration is a short hand property that captures the values of the following properties:

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 The decoration does not impact the images 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.

Decoration of exponents and indices
Sizes of text different
Influence of vertical alignment:
Baseline Bottom Middle Top Sub Super

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.

TextAnnotation     TextAnnotation

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.

Parent
Child 1
Child 2
Child 3
Child 4

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.

Parent  
Inline
 
Inline-block
  Parent
block

Examples with the text-decoration property.

A style of decoration commonly used to identify spelling or grammar mistakes.
In this regard, you can consult the page on the selector ::spelling-error, unfortunately still too little supported by browsers.
In a contractual document, one may sometimes wish to cancel a clause while keeping it visible.
In this example, two lines of decoration have been set up. Several lines can indeed be combined, but the syntax does not allow for differentiation of their color or stroke style.

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.

Animation of text-decoration

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.

Column 1
Support for text decoration including stroke type, color, jumps, etc.
Column 2
Browser support for the old text-decoration syntax, which is now equivalent to text-decoration-line.
Column 3
Text-decoration-line property support.
New syntax, from level 4 of the specification, defining the type of decoration line.
Column 4
Support for the text-decoration-thickness property to manage the thickness of decoration lines.
Column 5
Support for the 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.

1
Text
decoration
2
text-decoration
property
3
Text-decoration-line
property
4
text-decoration-thickness
property
5
text-decoration-color
property
Estimated overall support.
87%
97%
96%
95%
96%

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 and blink.
    WD
    November 17, 1995
    Working Draft.
    PR
    November 12, 1996
    Proposed for recommendation.
    REC
    December 17, 1996
    Recommendation .
    DEPR
    September 13, 2018
    Old specification, declared obsolete.
  • Cascading Style Sheets Level 2 - Revision 1 Specification

    The inherit value is accepted by the text-decoration property.
    WD
    November 04, 1997
    Working Draft.
    PR
    March 24, 1998
    Proposed for recommendation.
    REC
    May 11, 1998
    Recommendation .
  • CSS Text Decoration Module Level 3

    text-decoration comes as a shorthand property for text-decoration-line, text-decoration-style and text-decoration-color .
    Note: the blink value is declared obsolete in favor of the possibilities offered by animations.
    WD
    January 27, 1999
    Working Draft.
    CR
    August 01, 2013
    Candidate Recommendation.
    PR
    REC
  • CSS Text Decoration Module Level 4

    Addition of the property line-decoration-thickness to the properties managed by text-decoration.
    spelling-error and grammar-error values ​​are added for line styles.
    WD
    March 13, 2018
    Working Draft.
    CR
    PR
    REC

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:

text-decoration-color
Langue française
Defines the color of the decorative line (underlined, stripe...).
text-decoration-line
Defines the type of decoration: underlined, strikethrough, etc.
text-decoration-skip
Langue française
Short hand property that defines what decoration strokes should skip (spaces, jamb, and so on).
text-decoration-skip-box
Langue française
Defines how decorations inherited from parent elements should be applied.
text-decoration-skip-ink
Langue française
Defines whether the decoration lines (essentially the underline) are interrupted at the jambs.
text-decoration-skip-inset
Langue française
Defines how decorations for the element itself (and not those of the parent elements) should be applied.
text-decoration-skip-self
Langue française
text-decoration-skip-spaces
Langue française
text-decoration-style
Langue française
text-decoration-thickness
Langue française
text-emphasis
Langue française
A short hand property that defines all the parameters of the emphasis of a text.
text-emphasis-color
Langue française
Sets the color of the emphasis characters.
text-emphasis-position
Langue française
Defines the position of the emphasis characters.
text-emphasis-skip
Langue française
Defines whether highlights should be interrupted on spaces, punctuation marks, etc.
text-emphasis-style
Langue française
Specifies the emphasis style.
text-shadow
Langue française
This shorthand property defines all the parameters of the shadow applied to the text: color, offset, and so on.
text-underline-offset
Langue française
text-underline-position
Langue française