CSS Reference Property

text-decoration-line 1t4z49

The text-decoration-line property is used to add decoration to text in form of lines: above the text, below the text, or over the text, or to remove any existing decorations. 2g6l3c

It also accepts a value which causes text to blink, and which, although valid, is now deprecated.

The text-decoration-line property accepts one or more whitespace-separated values.

The line-through value is usually used to “strike out” lines of text that have been deleted or changed. Authors are encouraged in this case to use HTML elements such as <del> and <s> to preserve the semantics of such text, so that the meaning (Deletion) is still preserved even when styles are disabled on the page.

Anchor links have a default underline applied to them, which is good for accessibility, as some people depend on the presence of underlines to detect links on a page. So, even though removing the underlines is possible using text-decoration-line: none, it is highly recommended, for accessibility reasons, to keep the underlines or style them differently to match the overall style of the page, instead of completely removing them, unless another visual indication exists that indicates that a piece of text is in fact a link.

Official Syntax 55184y

  • Syntax:

    text-decoration: none | overline | line-through | underline | blink 
  • Initial: none
  • Applies To: all elements
  • Animatable: no

Values 584j31

none
No text decoration is added. If any decoration is applied it will be removed.
underline
Text is underlined. For multiple-line text, each line is underlined.
overline
Text has a line above it. For multiple-line text, each line of text has a line above it.
line-through
Text has a line ing through its middle. For multiple-line text, each line of text has a line through it.
blink
Makes text blink. This value is valid but is deprecated and browsers are allowed to ignore it.

Examples 3e5p5z

The following line will underline all lines in all paragraphs of class underlined.

p.underlined {
    text-decoration: underline;
}
                

The following line will add a line under and another line above all h1 elements.

h1 {
    text-decoration: underline overline;
}
                

Browser k5t66

This property currently only works in Firefox 6+, and it needs the -moz- prefix.

Further Reading 4g1p1d

Written by

Last updated June 4, 2020 at 4:11 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.