Text-decoration-line - Property CSS

text-decoration-line

Summary of characteristics of the text-decoration-line property

Quick description
Defines the type of decoration: underlined, strikethrough, etc.
Status
Standard
Usable for
HTML, SVG
Predefined values
none | overline | underline | line-through | blink | grammar-error | spelling-error
Percentages
Not applicable.
Initial value
none
Inherited by default
No. (1)
Animation type
Discrète : during an animation, the text-decoration-line property passes from one value to another without transition.
W3C Module
CSS Text Decoration Module
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: CR (Candidate Recommendation)

(1) Propagation according to another mechanism, different from classical inheritance.
See the paragraph on the propagation mechanism.

Syntax diagram of text-decoration-line.

text-decoration-line - Syntax DiagramSyntax diagram of the text-decoration-line CSS property. none none underline underline overline overline line-through line-through blink blink spelling-error spelling-error grammar-error grammar-errortext-decoration-line:;text-decoration-line:;
Syntax diagram of the text-decoration-line property.
The links in the diagram provide access to more details.

Description of the text-decoration-line property.

The text-decoration-line property defines the type of decoration to add to the text: underlined, overline, strike-through, and so on.

Underline   Overline   Strike-through   Blinking (1)

(1) The blinking is outdated. Your browser probably doesn't handle it.

The text-decoration-line property is naturally adaptable to the language: the decorative line can be found to the right or left of the text if the text is written vertically (e.g. CJK languages).

A more general presentation of the decorations is available on the page of the shorthand property text-decoration.

Particularity concerning the heritage of decorations.

All properties related to text decorations have an unusual inheritance mode. First of all, inheritance is only done for elements with certain types of: display, block, flex, grid, table, etc. Elements of the type inline-block, inline-table, inline-grid, etc. do not inherit the value of text-decoration-line.

Also, when text-decoration-line inherits its value from an ancestry, it is not possible to override this value as with the classic inheritance mechanism. The example below illustrates this mechanism. The parent element defines an underlining of the text, which the first child naturally inherits. The second child, on the other hand, tries to replace the underlining with a highlight. And here it doesn't work: we haven't replaced the decoration, but we added a second.
Even more surprising, child number 3 asks that there be no decoration ( text-decoration-line:none; ). And here again the result is not what was expected: the text is always underlined.

It is as if a descending element cannot remove decorations defined by a parent. A new property should make it possible to to resolve this issue: see text-decoration-skip .

Parent
Child 1
Child 2
Child 3

Refer to Le mécanisme de propagation des décorations for details on propagating decorations to descending elements.

Values for text-decoration-line.

  • text-decoration-line: none;

    No added decoration.

    Undecorated text
  • text-decoration-line: underline;

    TextaDecoration is added below the text. This can be a line (underscore), a double line, or any other defined possibility by text-decoration-style.

    Note that the stroke is interrupted so as not to cut the jambs of the letters (see text-decoration-skip ).

    Underline
  • text-decoration-line: overline;

    The decoration is added above the text.

    Overline
  • text-decoration-line: line-through;

    The decoration is added on top of the text. This can be used to cross out a word or phrase for example.

    Text Strikeout
  • text-decoration-line: underline line-through;

    Multiple values can be enumerated, separated by a space. The result is the accumulation of all these values.
    Note: It will not be possible to set different colors or styles for these decorations.

    Underlining and strikeout
  • text-decoration-line: spelling-error; text-decoration-line: grammar-error;

    Both values apply the same decoration as those used by the browser to indicate a spelling or grammar error. This is usually a red wavy line for spelling mistakes, and a green wavy line for grammar mistakes. But these characteristics are dependent on the browser and the operating system.

    With these two values, text-decoration-line can interfere with other properties related to decorations, such as color. In the example below, no color was requested, so the underline should be in the default currentColor. But this is not the case, and the text-decoration-color property will be inoperative to change that.

    Spelling mistake
    Grammar mistake

Standard values ​​accepted by all properties:

text-decoration-line: initial (none) text-decoration-line: inherit text-decoration-line: revert text-decoration-line: revertLayer text-decoration-line: unset

Links to the presentation of these different values: initial, inherit, revert, revert-layer, unset.

Animation of the text-decoration-line property.

The animation below explores the main existing decoration options (underlined, striped, overlined).

Demonstration

Simulator.

This simulator allows you to explore the different kinds of decoration, as well as their support by the browser on which you are viewing this page. The blink value will certainly not be recognized, even if it is not displayed in error.

Writing mode:
text-decoration-line :
The quick brown fox jumps over the lazy dog

Browsers compatibility.

text-decoration-line} is a property recognized by all browsers.
Note that the blink value is deprecated: it is recognized by browsers for compatibility reasons but has no effect. Use animation instead.

Column 1
Text-decoration-line property support.
New syntax, from level 4 of the specification, defining the type of decoration line.
Column 2
Support for the blink value for the text-decoration-line property.
Be careful, the table is misleading: the value is accepted but produces no effect.

Notes:

(1) The blink value is accepted but has no effect.

1
text-decoration-line
property
2
blink
value
Estimated overall support.
96%
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

1

Edge

1

Opéra

Safari

Safari sur IOS

Androïd Brower

1

Chrome pour Androïd

1

Firefox pour Androïd

1

Samsung Internet

1

Firefox

1

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse

Historic of the text-decoration-line property.

See also, about text decorations.

The CSS Text Decoration Module specification module groups together text decoration attributes: emphasis, shading, striping, etc. The text-decoration-line property is described in this module, along with the following properties:

Properties:

text-decoration
Summary property to define most of the text decoration parameters (color, type of line, etc.).
text-decoration-color
Langue française
Defines the color of the decorative line (underlined, stripe...).
⚠
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