Home 〉 CSS Tutorials 〉 CSS text-decoration Property with Examples - Underline, Overline, Line-through, None

CSS text-decoration Property with Examples - Underline, Overline, Line-through, None !

CSS text-decoration Property with Examples - Underline, Overline, Line-through, None !

Looking to add or remove text decorations like underlines? The CSS `text-decoration` property allows you to specify decorations such as underline, overline, line-through, or none. This tutorial demonstrates how to apply these styles and combine them for various effects. You'll also learn about the shorthand notation for setting multiple decoration properties at once. Enhance your text styling with this property. Check out the our detailed post on CSS text-decoration Property with Examples

CSS 'text-decoration' Property - Explained with Examples

The 'text-decoration' property in CSS is used to add or remove decorations from text, like underlines or strike-throughs. It's commonly used to style links, headings, or any inline content.

Syntax

Syntax ✍

selector {
text-decoration: value;
}

Common values:

  • 'none' - No decoration
  • 'underline' - Adds a line below the text
  • 'overline' - Adds a line above the text
  • 'line-through' - Adds a line through the text

Examples with HTML Tags

Underline Text

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<p style="text-decoration: underline;">This text is underlined.</p>

</body>
</html>

output 📌

This text is underlined.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: A line appears 'under' the text.

Overline Text

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<p style="text-decoration: overline;">This text has an overline.</p>

</body>
</html>

output 📌

This text has an overline.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: A line appears 'above' the text.

Line-through Text

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<p style="text-decoration: line-through;">This text has a line through it.</p>

</body>
</html>

output 📌

This text has a line through it.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: A horizontal line strikes through the middle of the text.

Remove Underline from Link

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<a href="#" style="text-decoration: none;">Click here</a>

</body>
</html>

output 📌

Click here
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: Removes the default underline from a hyperlink.

Multiple Decorations

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<p style="text-decoration: underline overline;">This text has underline and overline.</p>

</body>
</html>

output 📌

This text has underline and overline.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Meaning: Adds both underline and overline to the same text.

text-decoration vs text-decoration-line (Modern Usage)

In modern CSS, you can break 'text-decoration' into multiple properties:

  • 'text-decoration-line'
  • 'text-decoration-color'
  • 'text-decoration-style'
  • 'text-decoration-thickness'

Example:

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.p-class {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
}

</style>
</head>
<body>

<p class="p-class">This text has multiple properties.</p>

</body>
</html>

output 📌

This text has multiple properties.

Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Best Practices

  • Use 'text-decoration: none;' for cleaner looking links or buttons.
  • Combine with ':hover' for interactive effects.
  • Use CSS classes instead of inline styles for maintainability.

Conclusion

The 'text-decoration' property helps you control the visual style of your text. Whether you're adding emphasis with underline or removing default link styling, this property is simple yet powerful.

  • ✅ Use 'underline' or 'line-through' to style important text.
  • ✅ Use 'none' to clean up link appearance.
  • ✅ For better control, use modern `text-decoration-*` sub-properties.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs)

How do I remove the underline from a link in CSS?

Use 'text-decoration: none;' on the anchor ('<a>') element.

Can I use multiple text decorations?

Yes. Example: 'text-decoration: underline overline;'

What is the difference between 'text-decoration' and 'text-decoration-line'?

'text-decoration' is shorthand. 'text-decoration-line' is a specific sub-property for lines only.

Can I change the color of underline or line-through?

Yes. Use 'text-decoration-color'. Example: 'text-decoration-color: red;'

Is 'text-decoration' supported in all browsers?

Yes, it's widely supported across all modern and older browsers.

Previous Post Next Post