CSS text-decoration-line Property

Description

The text-decoration-line CSS property is used to specify the type of text decoration to be applied to an element's text content. Text decorations are typically used to underline, overline, or strike through text. This property accepts values like "underline," "overline," "line-through," "none," or "inherit," allowing developers to control how text within an element should be visually styled to convey emphasis or other information. By using text-decoration-line, you can customize the appearance of text within your web page, enhancing its readability and visual appeal.

Initial value
none
Applies to
All elements
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.textDecorationLine

Syntax

text-decoration-line: none | [ underline || overline || line-through ]

Values

  • noneProduces no text decoration.
  • underlineEach line of text is underlined.
  • overlineEach line of text has a line over it.
  • line-throughEach line of text has a line through the middle.

Example

<p class="test"> text-decoration-line: overline;  </p> 
<p class="test2"> text-decoration-line: underline line-through; </p>
.test {
   font-size: 24px; 
   -webkit-text-decoration-line: overline; 
   -moz-text-decoration-line: overline;  
   text-decoration-line: overline;  
}
.test2 {
   font-size: 24px; 
   -webkit-text-decoration-line: underline line-through; 
   -moz-text-decoration-line: underline line-through; 
   text-decoration-line: underline line-through;
}

Browser Support

The following table will show you the current browser support for the CSS text-decoration-line property.

Desktop
Edge Chrome Firefox Opera Safari
7957364412.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
57364312.2757

Last updated by CSSPortal on: 29th September 2023