How to Use CSS Text Decoration for Stylish Text Effects

  • Blog /
  • How to Use CSS Text Decoration for Stylish Text Effects
Blog Featured Image

Creating stylish text effects with CSS text decoration is a great way to add visual appeal to your web content. CSS provides a variety of text decoration properties that can be combined with other styling techniques to achieve unique and eye-catching effects. In this blog post, we’ll explore several ways you can use CSS text decoration to create stylish text effects, along with code examples for each.

Introduction to CSS Text Decoration

CSS text-decoration is a shorthand property that controls the decoration of text, such as underlining, overlining, and striking through text. It is commonly used for adding emphasis to links, but it can also be utilized creatively for various text effects.

 

Values for text-decoration include:

  1. underline: Adds an underline to the text.
  2. overline: Adds a line above the text.
  3. line-through: Adds a line through the text.
  4. none: Removes all text decorations.

text-decoration underline property in CSS

The text-decoration property in CSS is used to set decoration on text, such as underlining, overlining, or striking through. When you use text-decoration: underline, it applies a line under the text. This can be particularly useful for links, headings, or emphasizing certain words.

text-decoration underline property in CSS

HTML Example : 

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Text Decoration Example</title>


<style>


     p {


         text-decoration: underline;


     }


</style>


</head>


<body>


<p>This text is underlined.</p>


</body>


</html>

text-decoration overline property in CSS

The text-decoration: overline property in CSS is used to add a line above the text. It's commonly used for emphasis or to distinguish certain elements visually.

text-decoration overline property in CSS

HTML Example : 

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Text Decoration Example</title>


<style>


     p {


         text-decoration: overline;


     }


</style>


</head>


<body>


<p>This text has an overline.</p>


</body>


</html>

text-decoration line-through property in CSS

The text-decoration: line-through property in CSS is used to strike a line through the text. This style is often used for indicating that something is no longer valid or completed, such as in a list of tasks or when showing discounts.

text-decoration line-through property in CSS

HTML Example :

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Text Decoration Example</title>


<style>


     p {


         text-decoration: line-through;


     }


</style>


</head>


<body>


<p>This text has a line through it.</p>


</body>


</html>

text-decoration none property in CSS

The text-decoration: none property in CSS is used to remove any text decoration (like underline, overline, or line-through) from the text. It's commonly used to reset the default styles applied to links, ensuring they don't appear underlined unless specified.

HTML Example : 

Copied



<!DOCTYPE html>


<html lang="en">


<head>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Text Decoration Example</title>


<style>


     a {


         text-decoration: none;


     }


</style>


</head>


<body>


<a href="#">This is a link without underline.</a>


</body>


</html>

Conclusion

CSS text decoration is a versatile tool for adding stylish text effects to your web pages. From simple underlines to complex animations, the ability to customize the color, style, and thickness of the text decoration lines can bring a unique touch to your typography. Experiment with the various properties like text-decoration, text-decoration-style, text-decoration-color, and text-decoration-thickness to create effects that suit your design style.