CSS text-decoration-line Property

February 10, 2021 12:37 pm IST

You are Here:

CSS text-decoration-line Property

CSS text-decoration-line property sets the kind of decoration that is used on text in an element.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> p{ font-size: 19px; } p:nth-child(3){ text-decoration-line: none; } p:nth-child(5){ text-decoration-line: underline; } p:nth-child(7){ text-decoration-line: overline; } p:nth-child(9){ text-decoration-line: line-through; } </style> </head> <body> <h1>CSS text-decoration-line Property</h1> <h2>text-decoration-line: none;</h2> <p>This is a paragraph.</p> <h2>text-decoration-line: underline;</h2> <p>This is a paragraph.</p> <h2>text-decoration-line: overline;</h2> <p>This is a paragraph.</p> <h2>text-decoration-line: line-through;</h2> <p>This is a paragraph.</p> </body> </html>

Run

Syntax

Using CSS

element{ text-decoration-line: underline; }

Using Javascript

object.style.textDecorationLine="underline";

Animatable

No, text-decoration-line property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS text-decoration-line property is none.

Property Value

The following table provides a list of values for CSS text-decoration-line property.

Value	Explanation
none	Specifies no text decoration.
underline	Specifies that a line will be displayed under the text.
overline	Specifies that a line will be above under the text.
line-through	Specifies that a line will be displayed through the text.

Using JavaScript

In the following example, we will demonstrate how to change the CSS text-decoration-line property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <body> <h1>CSS text-decoration-line Property</h1> <p>This is a paragraph</p> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ x.style.textDecorationLine = "line-through"; } </script> </body> </html>

Run