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
inline-block, inline-table, etc.
InlineInline-blockblockExamples 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-decorationproperty
Text-decoration-lineproperty
text-decoration-thicknessproperty
text-decoration-colorproperty
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 thetext-decorationproperty, accepting the following values:none,underline,overline,line-throughandblink.
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
Theinheritvalue is accepted by thetext-decorationproperty.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Text Decoration Module Level 3
text-decorationcomes as a shorthand property fortext-decoration-line,text-decoration-styleandtext-decoration-color.
Note: theblinkvalue 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-thicknessto the properties managed bytext-decoration.
spelling-errorandgrammar-errorvalues 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: