Text-decoration-line - Property CSS

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

Syntax diagram of text-decoration-line.

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) 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 .

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: blink; ✗

  The decoration line is flashing. This value is obsolete: browsers may not consider this value to be a syntax error, but simply ignore it.

  Flashing is indeed strongly discouraged in the official document of W3C: Accessibility recommendations for browsers.

  If you really want flashing, use a CSS animation instead to get a blink (see the animation property).

  Blinking
• 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
• 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).

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.

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.

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.

• CSS Text Decoration Module Level 3

  First presentation of the text-decoration-line property.
  

  January 27, 1999

  Working Draft.

  

  August 01, 2013

  Candidate Recommendation.

  

  

• CSS Text Decoration Module Level 4

  Adding spelling-error and grammar-error values ​​for the text-decoration-line property.
  

  March 13, 2018

  Working Draft.

  

  

  

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

Defines the color of the decorative line (underlined, stripe...).

⚠

text-decoration-skip

Short hand property that defines what decoration strokes should skip (spaces, jamb, and so on).

⚠

text-decoration-skip-box

Defines how decorations inherited from parent elements should be applied.

⚠

text-decoration-skip-ink

Defines whether the decoration lines (essentially the underline) are interrupted at the jambs.

⚠

text-decoration-skip-inset

Defines how decorations for the element itself (and not those of the parent elements) should be applied.

⚠

text-decoration-skip-self

Defines whether the decorations of the parent element(s) should be applied to this element.

⚠

text-decoration-skip-spaces

Defines whether the decorative lines (underlining, stripes...) concern the spaces.

text-decoration-style

Type of line for decoration: solid, dotted, etc.

text-decoration-thickness

Defines the thickness of the decorative lines (for underline, strikethrough, highlight).

text-emphasis

A short hand property that defines all the parameters of the emphasis of a text.

text-emphasis-color

Sets the color of the emphasis characters.

text-emphasis-position

Defines the position of the emphasis characters.

⚠

text-emphasis-skip

Defines whether highlights should be interrupted on spaces, punctuation marks, etc.

text-emphasis-style

Specifies the emphasis style.

text-shadow

This shorthand property defines all the parameters of the shadow applied to the text: color, offset, and so on.

text-underline-offset

text-underline-position