Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Make Stylish Text with CSS Text Decoration

Introduction

Text is the most common building block of websites, crucial for creating engaging and user-friendly interfaces. CSS text decoration can help make our words stand out, grab attention, and keep your audience scrolling.

In this comprehensive guide, we will explore how to use CSS text decoration to enhance the appearance, feel, and overall typography of text.

What is Text Decoration in CSS

Text decoration in CSS refers to the visual embellishments that can be applied to text elements, such as underline, strikethrough, overline, and line-through. These effects are commonly referred to as text decoration lines and can be used to emphasize or differentiate specific parts of the text.

Types of CSS Text Decoration Line

The text-decoration-line is a versatile CSS property that enables you to select the type of line you wish to display on your text. By using this property, you can easily customize the appearance of your text and create a more engaging and visually appealing design.

This property also offers a variety of options, allowing you to choose from underline, overline, line-through, or a combination of these styles to achieve the desired effect.

Thus by using the text-decoration-line property, designers can enhance the readability of their content, draw attention to specific elements, or indicate interactive elements like hyperlinks.

Some values of this property are discussed below:

PropertyDescription
noneNo decoration is applied.
underlineThe underline value adds an underline to the text.
overlineThe overline value adds a line above the text.
line-throughThe line-through value adds a line through the middle of the text.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Similarly, give Purecode a try today to instantly generate thousands of customizable, styled HTML, CSS, and JavaScript components to accelerate your web development projects.

Underline

The underline CSS property is used to add a line beneath a text as shown below.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-line: underline;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration</h1>
  </body>
</html>

Then, any text within the h1 tag will have an underline as seen in the example above.

Overline

The overline CSS property is used to add a line above a text as shown below.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration</h1>
  </body>
</html>

Any text within the h1 element will have an overline in this example.

Line-through

The line-through CSS property is used to add a horizontal line through the middle of the text creating a cancel or strike-through effect.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-line: line-through;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration</h1>
  </body>
</html>

The line-through property will affect any text within the h1 element.

None

The CSS text-decoration-line: none; property is used to remove any text decoration line that was applied to any element.

This is most commonly used to remove underlines from links that have been applied either by default browser styles or by any other custom CSS.

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      .no-decoration {
        text-decoration-line: none;
      }
    </style>
  </head>
  <body>
    <a href="https://www.google.com/">Google</a>
    <br />
    <a href="https://www.google.com/" class="no-decoration">Google</a>
  </body>
</html>

The text-decoration-line: none; property was applied to the text within the anchor tag. As a result, this removed the default browser underline style that was applied to the link.

CSS Text Decoration Property

The CSS text-decoration property is used to decorate texts within an HTML element. It can be used to add or remove visual styling e.g. underline and overline, etc.

The text-decoration is a shorthand representation of text-decoration-line, text-decoration-color, and text-decoration-style.

For instance, the shorthand is useful because when using the text-decoration-style property, always bear in mind that the text-decoration-line property is required.

For example:

When you apply a text-decoration-style: dotted; property to a text within an h1 tag, the effect will not be applied to the text because the required text-decoration-line styling was not added.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration</h1>
  </body>
</html>

Below is the output of the code above – the decoration style is not applied:

To visualize the effect of the text-decoration-style property, we need to add the required text-decoration-line property.

Now, let’s add the text-decoration-style: dotted; property to the text within the h1 tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-line: underline;
        text-decoration-style: dotted;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration</h1>
  </body>
</html>

The output of the code above – the underline decoration style was only applied after we added the decoration line value:

This method requires two lines of code to achieve a dotted underlined text decoration as shown above.

Alternatively, we can use the text-decoration property to combine the text-decoration-line and text-decoration-style properties as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration: underline dotted;
      }
    </style>
  </head>
  <body>
    <h1>Text Decoration</h1>
  </body>
</html>

CSS Text Decoration Color

The CSS text-decoration-color property is used to add color to the line decoration that has been applied to a text.

The default color after adding a text-decoration-line to a text is black, and we may wish to spice things up by adding a different color because colors play a special role in emphasizing or deemphasizing a text.

Adding Colors to CSS Text Decoration

Remember, to apply text-decoration-style to a text, it is required that the text-decoration-line property is also applied. This same rule also applies here.

Different colors can be applied to a text-decoration-line property (e.g. underline, overline, line-through) using the text-decoration-color.

For example; let’s make a line-through a red color, to emphasize the text was canceled.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-line: line-through;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Flight cancelled</h1>
  </body>
</html>

The output will be:

Alternatively, lines and colors can be added to a text decoration using the text-decoration shorthand property.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration-line: line-through red;
      }
    </style>
  </head>
  <body>
    <h1>Flight cancelled</h1>
  </body>
</html>

The text-decoration-color property can also accept different color formats as it’s value.

  • Hexadecimal Color

    .hex {
      text-decoration: underline;
      text-decoration-color: #4CAF50;
    }
  • RGBA (Red, Green, Blue, Alpha)

    .rgba {
      text-decoration: underline overline;
      text-decoration-color: rgba(255, 165, 0, 0.7); 
    }
  • HSLA (Hue, Saturation, Lightness, Alpha)

    .hsla {
      text-decoration: line-through;
      text-decoration-color: hsla(120, 100%, 25%, 0.5); 
    }
  • Named Colors

    .named {
      text-decoration: underline;
      text-decoration-color: gold; 
    }

Combining CSS Text Decoration Style

The text-decoration-style property can also be combined with other text-decoration properties to create fancy styles for text decorations as shown below:

The source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      .line-solid {
        text-decoration: underline;
        text-decoration-style: solid;
      }
      .line-dashed {
        text-decoration: underline;
        text-decoration-style: dashed;
      }
      .line-dotted {
        text-decoration: underline;
        text-decoration-style: dotted;
      }
      .line-double {
        text-decoration: underline;
        text-decoration-style: double;
      }
      .line-wavy {
        text-decoration: underline;
        text-decoration-style: wavy;
      }
      .line-none {
        text-decoration: underline;
        text-decoration-style: none;
      }
    </style>
  </head>
  <body>
    <h1 class="line-solid">Solid Text Decoration Style</h1>
    <h1 class="line-dashed">Dashed Text Decoration Style</h1>
    <h1 class="line-dotted">Dotted Text Decoration Style</h1>
    <h1 class="line-double">Double Text Decoration Style</h1>
    <h1 class="line-wavy">Wavy Text Decoration Style</h1>
    <h1 class="line-none">None Text Decoration Style</h1>
  </body>
</html>
ValueDescription
solidThe default state of the text-decoration-style
dashedIt creates a dashed horizontal line.
dottedIt creates a dotted horizontal line.
doubleIt creates a double horizontal line.
wavyIt creates a wavy horizontal squiggly line that has a wave-like pattern.
noneIf the value none is applied, it means that the text-decoration-style property will not be applied.

These styles enable you to change the appearance of text decorations, which adds visual appeal to your webpage.

Applying CSS Text Decoration to Specific Elements

Selectors such as elements, IDs, and classes can be utilized to target specific sections of your HTML content for text decoration using CSS. This allows for the reusability of the text-decoration style, providing a consistent and coherent appearance throughout your webpage.

Using inline CSS

Below is an example of applying a text-deocation property to an HTML element using the inline CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
  </head>
  <body>
    <h1 style="text-decoration: underline red">Text Decoration</h1>
  </body>
</html>

Using Classes

Below is an example of applying a text-deocation property to an HTML element using the class identifier and the internal CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
  </head>
  <style>
    .text-style {
      text-decoration: overline;
      text-decoration-color: black;
    }
  </style>
  <body>
    <h1 class="text-style">Using Classes</h1>
  </body>
</html>

Using IDs

Below is an example of applying a text-deocation property to an HTML element using the id identifier and the internal CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      #text-style {
        text-decoration: line-through;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h1 id="text-style">Using IDs</h1>
  </body>
</html>

Using Element Tag Name

We can target a specific HTML tag in a webpage. Every instance of this tag in the HTML document will be affected by this property.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
    <style>
      h1 {
        text-decoration: overline;
        text-decoration-color: red;
      }
    </style>
  </head>
  <body>
    <h1>Using Element Tag Name</h1>
  </body>
</html>

By employing these selectors, you can apply different text-decoration styles to various parts of your content, ensuring that each section stands out and conveys the intended message effectively.

This level of customization enables you to create visually appealing web pages that capture the attention of your audience and enhance the overall user experience.

Text Decoration Shorthand

Oftentimes, we want to decorate text using one-liner syntax instead of using multiple text-decoration properties. CSS provides a shorthand property for text decoration which can include three values.

  • text-decoration-line: This specifies the kind of decoration, such as underline, overline, line-through, or a combination of these.

  • text-decoration-style: This specifies the line’s style, such as solid, double, dotted, dashed, or wavy.

  • text-decoration-color: This sets the color of the decoration.

The shorthand syntax is defined as follows:

text-decoration: [line] [style] [color];

You can also combine multiple text decoration lines in one declaration:

text-decoration: [line] [line] [style] [color];

Text Decoration States

In CSS, we have different states of an element e.g. links, text-decoration can be used to indicate those different states.

Pseudo ClassDescription
:linkThis state represents an unvisited link.
:hoverRepresents an element that is being hovered over by the mouse.
:activeRepresents an element being activated (clicked on) by the user.

Code example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Text Decoration</title>
  </head>
  <body>
    <a href="">Text decoration</a>
  </body>
  <style>
    /* Unvisited link */
    a:link {
      text-decoration: overline;
      color: blue;
    }

    /* Hovered link */
    a:hover {
      text-decoration: none; /* Remove underline on hover */
      color: green;
    }

    /* Active link */
    a:active {
      text-decoration: underline;
      color: green;
    }
  </style>
</html>

The output of the code above:


Text decoration plays a crucial role in enhancing the visual appeal and interactivity of links in web pages. The :link pseudo-class targets links in their default state, adding underline and color to emphasize their clickable nature.

The :hover pseudo-class, on the other hand, styles links when users hover over them, changing the color or removing the underline to create a highlighting effect.

By carefully applying text-decoration to these pseudo-classes, you can create visually engaging and user-friendly navigation experiences.

Wrapping Up CSS Text Decoration

Finally, CSS text decoration enhances the styling of text on websites. It enables developers to apply cool colors and styles to text to make it more fascinating and to improve the overall typography and user experience of web pages.

By leveraging the power of CSS text decoration, web designers and developers can create engaging and aesthetically pleasing web pages that not only capture the attention of users but also enhance the overall browsing experience.

As a result, CSS text decoration is an essential tool in the arsenal of any web professional looking to create visually stunning and user-friendly websites.

Checkout Purecode!

I recommend you try out Purecode, an AI tool that can generate custom HTML, CSS, and JavaScript components. Here are some of its features:

  • It uses an AI assistant to generate thousands of responsive pre-made components for you.
  • The components come with default styling using CSS, Tailwind CSS, or your own custom styles so you can match your brand’s design.
  • You can easily customize the generated components to suit your specific needs – change colors, spacing, paddings, margins, etc.
  • It generates both the HTML markup and CSS styles for the components, saving you development time.
  • It also includes some JavaScript functionality within the components to make them interactive.
Ayodele Samuel Adebayo

Ayodele Samuel Adebayo