CSS text-decoration-line Property

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.


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>


Using CSS

element{ text-decoration-line: underline; }

Using Javascript



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.

noneSpecifies no text decoration.
underlineSpecifies that a line will be displayed under the text.
overlineSpecifies that a line will be above under the text.
line-throughSpecifies 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.


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>


Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author