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

Interactive Demo

text-decoration-line: underline;

text-decoration-line: line-through;

text-decoration-line: overline;

text-decoration-line: underline line-through;

text-decoration-line: underline overline;

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
79	57	36	44	12.1

Tablets / Mobile
57	36	43	12.2	7	57

Last updated by CSSPortal on: 2nd January 2024