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 CSS Underline a Text: A Comprehensive Guide

CSS (Cascading Style Sheets) is a powerful language used for describing the presentation of a document written in HTML. One common formatting task is CSS underline, or underlining text, which emphasizes certain words or phrases within a webpage.

To achieve this effect, CSS provides a straightforward property called text decoration. By utilizing this property, web developers can easily apply underlines to specific pieces of text, headings, or even entire paragraphs.

In this guide, we will explore the use of the text-decoration property and demonstrate how it can be employed on text in various contexts within a web page, allowing for greater control over the visual presentation of content.

CSS text-Decoration

The text-decoration property in CSS is used to set or remove decorations from text content. It can be applied to inline and inline-block elements.

Text-decoration-line

In CSS, the text-decoration-line property is used to set or remove decorations on text content. It allows you to specify one or more text decoration lines. Here are the possible values for the text-decoration-line property:

PropertyDescription
noneNo decoration is applied.
underlineAdds an underline to the text.
overlineAdds a line above the text.
line-throughAdds a line through the middle of the text.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Here is an example of how to use the text-decoration-line property in CSS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <style>
      /* Apply underline decoration */
      .text-underline {
        text-decoration-line: underline;
      }

      /* Apply overline decoration */
      .text-overline {
        text-decoration-line: overline;
      }

      /* Apply line-through decoration */
      .text-line-through {
        text-decoration-line: line-through;
      }

      /* Remove decoration */
      .text-no-decoration {
        text-decoration-line: none;
      }
    </style>
  </head>
  <body>
    <p class="text-underline">Apply underline decoration</p>
    <p class="text-overline">Apply overline decoration</p>
    <p class="text-line-through">Apply line-through decoration</p>
    <a href="#" class="text-no-decoration">Remove decoration from link</a>
  </body>
</html>

The above code will produce the following output:

You can also use the shorthand property text-decoration to set multiple decoration values at once. For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <style>
      .text-combined {
        text-decoration: underline overline line-through;
      }
    </style>
  </head>
  <body>
    <p class="text-combined">text-combined</p>
  </body>
</html>

The above code will produce the following output:

In this example, the text will have all three decorations: underline, overline, and line-through.

Text-decoration-style

The text-decoration-style property in CSS is used to set the style of the line specified by the text-decoration-line property. This property is often used in conjunction with text-decoration-line to control the appearance of the text decorations.

Here are the possible values for the text-decoration-style property:

PropertyDescriptions
solidThe default value. A solid line is used for the text decoration.
doubleThe text-decoration is rendered as a double line.
dottedThe text-decoration is rendered as a series of dots.
dashedThe text-decoration is rendered as a series of short dashes.
wavyThe text-decoration is rendered as a wavy line.

Here is an example of how to use the text-decoration-style property in CSS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <style>
      /* Apply underline decoration with a dashed style */

      .text-dashed-underline {
        text-decoration-line: underline;
        text-decoration-style: dashed;
      }

      /* Apply overline decoration with a wavy style */

      .text-wavy-overline {
        text-decoration-line: overline;
        text-decoration-style: wavy;
      }

      /* Apply line-through decoration with a double style */

      .text-double-line-through {
        text-decoration-line: line-through;
        text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <p class="text-dashed-underline">text-dashed-underline</p>
    <p class="text-wavy-overline">text-wavy-overline</p>
    <p class="text-double-line-through">text-double-line-through</p>
  </body>
</html>

The code above will produce the following output:

In the examples above, you can see how text-decoration-style is used to define the style of the text decoration.

Keep in mind that not all combinations of text-decoration-line and text-decoration-style make sense, and some combinations might not be supported in all browsers.

As always, it’s a good idea to test your styles across different browsers to ensure compatibility.

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

Text-decoration-color

The text-decoration-color property in CSS is used to set the color of the line specified by the text-decoration-line property. This property allows you to control the color of text decorations such as underline, overline, and line-through.

Here’s an example of how to use the text-decoration-color property in CSS:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <style>
      /* Apply an underline with a red color */
      .text-red-underline {
        text-decoration-line: underline;
        text-decoration-color: red;
      }

      /* Apply an overline with a blue color */
      .text-blue-overline {
        text-decoration-line: overline;
        text-decoration-color: blue;
      }

      /* Apply a line-through with a green color */
      .text-green-line-through {
        text-decoration-line: line-through;
        text-decoration-color: green;
      }
    </style>
  </head>
  <body>
    <p class="text-red-underline">text-red-underline</p>
    <p class="text-blue-overline">text-blue-overline</p>
    <p class="text-green-line-through">text-green-line-through</p>
  </body>
</html>

The code above will produce the output below:

In this example, the text-decoration-color property is used to set the color of the text decoration lines. You can use any valid CSS color value, such as a color name, hexadecimal code, RGB, or HSL value.

Keep in mind that browser support for text-decoration-color may vary, so it’s a good idea to check compatibility if you’re working on a project that needs to support multiple browsers. If a browser doesn’t support this property, it will typically use the default text color for the decoration.

The text-decoration property is versatile and allows you to control the visual presentation of text in various ways, offering flexibility in designing the appearance of your content.

Text Underline

Text underline is a visual style applied to text to create a horizontal line underneath it. In CSS, the text-decoration property is commonly used to control text decoration, including underlining.

When you set text-decoration: underline; it adds a line below the text content. Here’s a more detailed explanation:

Step 1: Basic Syntax:

.text-with-underline {
   text-decoration: underline;
}

Step 2: Applying Underline to Specific Elements:

You can apply the underline style to specific HTML elements using their class or ID.

<p class="text-with-underline">This text has an underline.</p>
<span class="text-with-underline">This is underlined as well.</span>

Output:

Step 3: Removing Underline:

If you want to remove the underline, you can use text-decoration: none;

.no-underline {
   text-decoration: none;
}

Step 4: Global Underline Styles:

To apply underline to all elements within a certain context, you can use the universal selector * or specify the style for a particular element.

* {
   text-decoration: underline;
}

Step 5: Browser Defaults:

Browsers typically have default styles for certain HTML elements. For example, most browsers will underline hyperlinks (<a> tags) by default. You can override or modify these defaults with your own styles.

Step 6: Text Decoration Shorthand:

The text-decoration property is a shorthand property that can also accept multiple values. For example, you can combine underline with other decorations like overline and line-through.

.multiple-decorations {
   text-decoration: underline overline line-through;
}

Gradient underline

Creating a gradient underline in CSS involves using the linear-gradient function for the background-image property. This technique allows you to apply a gradient effect to the background of an element, effectively creating a gradient underline for text. Here’s a step-by-step explanation:

1. Basic Gradient Underline:

.gradient-underline {
  background-image: linear-gradient(
    to right,
    #ff7e5f,
    #feb47b
  ); /* Define your gradient colors */
  background-position: 0% 100%; /* Start the gradient at the bottom */
  background-size: 100% 3px; /* Set the size and thickness of the underline */
  background-repeat: no-repeat; /* Ensure the gradient doesn't repeat */
}

2. Applying to Text:

Apply the class to the HTML element containing the text you want to have the gradient underline.

<p class="gradient-underline">Gradient-underline</p>

Output:

3. Customizing Gradient Colors:

Adjust the colors in the linear-gradient function to customize the gradient.

.gradient-underline {

background-image: linear-gradient(to right, #3498db, #2ecc71);

/* ... rest of the styling properties ... */

}

Output:

4. Horizontal Gradient Underline:

By using the ‘to right’ direction in the ‘linear-gradient’ function, you create a horizontal gradient. Adjust the direction to suit your design.

5. Vertical Gradient Underline:

To create a vertical gradient underline, you can use the to bottom direction.

/* CSS */

.gradient-underline {
background-image: linear-gradient(to bottom, #3498db, #2ecc71);
/* ... rest of the styling properties ... */
}

Output:

6. Adjusting Thickness:

Modify the background-size property to control the thickness of the underline.

.gradient-underline {

background-size: 100% 5px; /* Adjust thickness as needed */

/* ... rest of the styling properties ... */

}

Output:

7. Adding Animation (Optional):

You can add animation for a dynamic effect. For example, a transition on the background-size property creates a smooth animation.

/* CSS */

.gradient-underline {
  transition: background-size 0.3s ease-in-out;

  /* ... rest of the styling properties ... */
}

.gradient-underline:hover {
  background-size: 100% 8px; /* Adjust thickness on hover */
}

The above animation will produce the following effects:

Following these steps, you can create a gradient underline effect in CSS. Adjust the colors, direction, thickness, and other properties to achieve the desired visual result.

Short Underline

Short underline can be achieved in CSS by using the border-bottom property. This property allows you to create an underline of a specified length. Here’s an explanation of how to create a short underline in CSS:

1. Basic Short Underline:

.short-underline {
  border-bottom: 2px solid #333; /* Adjust thickness and color as needed */
}

From the above  example:

  • .short-underline is a class that you can apply to HTML elements containing text.

  • border-bottom: 2px solid #333; creates a solid black line (#333 represents the color) under the text, and you can adjust the pixel value to change the thickness.

2. Applying to Text:

Apply the class to the HTML element containing the text you want to have a short underline.

<p class="short-underline">Text with Short Underline</p>

3. Adjusting Length:

To control the length of the underline, you can use the width property in conjunction with border-bottom.

.short-underline {

border-bottom: 2px solid #333;

width: 50%; /* Adjust the width to control the length of the underline */

}

4. Positioning:

If you want to position the short underline at a specific distance from the text, you can use the margin-bottom property.

.short-underline {

border-bottom: 2px solid #333;

width: 50%;

margin-bottom: 5px; /* Adjust the margin to control the distance from text */

}

5. Adding Animation (Optional):

You can add animation for a dynamic effect. For example, a transition on the ‘width’ property creates a smooth animation.

.short-underline {
  border-bottom: 2px solid #333;
  width: 50%;
  margin-bottom: 5px;
  transition: width 0.3s ease-in-out;
}

.short-underline:hover {
  width: 100%; /* Adjust the width on hover */
}

Following these steps, you can create a short underline effect in CSS. Adjust the thickness, color, length, and other properties to achieve the desired visual result.

Animated underline

Creating an animated underline effect in CSS often involves using transitions or animations to change the appearance of the underline when the user interacts with the text.

Here’s a step-by-step explanation of how you can achieve an animated underline:

1. Basic Underline:

Start with a basic underline using the border-bottom property.

.animated-underline {
  border-bottom: 2px solid #333; /* Adjust thickness and color as needed */
}

2. Adding Animation:

Introduce a CSS transition to create a smooth animation when the properties change.

.animated-underline {
  width: 50%;
  border-bottom: 2px solid #333;
  transition: width 0.3s ease-in-out; /* Add a transition effect */
}

3. Applying to Text:

Apply the class to the HTML element containing the text you want to have an animated underline.

<p class="animated-underline">Text with Animated Underline</p>

4. Triggering Animation (Optional):

You can trigger the animation on user interaction, such as when the user hovers over the text.

.animated-underline:hover {
  width: 100%; /* Adjust the width on hover to change the appearance */
}

5. Adjusting Animation Properties:

Customize the animation by adjusting properties like ‘width’, ‘color’, or any other relevant property.

.animated-underline {
  border-bottom: 2px solid #333;
  width: 50%; /* Initial width */
  transition: width 0.3s ease-in-out, color 0.3s ease-in-out; /* Add color transition */
}

.animated-underline:hover {
  width: 100%; /* Adjust the width on hover */
  color: red; /* Change color on hover */
}

Output:

6. Using Keyframe Animations (Alternative):

Alternatively, you can use keyframe animations for more complex and controlled animations.

@keyframes underlineAnimation {
  0% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

.animated-underline {
  border-bottom: 2px solid #333;
  width: 0%;
  /* Use the keyframe animation */
  animation: underlineAnimation 2s ease-in-out infinite;
}

Following these steps, you can create an animated underline effect in CSS. Customize the transition or animation properties to achieve the desired visual result, and ensure that the animation adds a positive user experience without causing confusion or distraction.

Multi-line underline

Creating a multi-line underline effect in CSS involves underlining each line of text individually. This can be achieved using a combination of CSS properties.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My webpage</title>
    <style>
      .wrapper {
        width: 400px;
      }

      .link {
        font-size: 3em;
        font-weight: bold;
        text-decoration: none;
        font-family: sans-serif;
        color: blue;
      }

      .underline {
        width: calc(100%);
        background-image: linear-gradient(
          transparent calc(100% - 10px),
          dodgerblue 10px
        );
        background-repeat: no-repeat;
        background-size: 0% 100%;
        transition: background-size 1s;
      }

      .link:hover .underline {
        background-size: 100% 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <a class="link" href="youtube.com/@unclebigbay"
        >Visit my <span class="underline">YouTube channel</span></a
      >
    </div>
  </body>
</html>

Output:

Text Overline

The CSS text-decoration property is commonly used to add visual effects to text, and the overline value is used to add a line above the text, creating an overline effect.

Here’s a detailed explanation of how to use the overline value for the text-decoration property:

1. Basic Overline:

.overline-text {
text-decoration: overline;
}

In this example:

  • .overline-text is a class that you can apply to HTML elements containing text.

  • text-decoration: overline; adds a line above the text.

2. Applying to Text:

Apply the class to the HTML element containing the text.

<p class="overline-text">Text with Overline</p>

Output:

3. Customizing Overline Color and Style:

You can further customize the overline color and style using additional CSS properties like text-decoration-color and text-decoration-style.

.custom-overline {
  text-decoration: overline;
  text-decoration-color: red; /* Customize the color */
  text-decoration-style: dashed; /* Customize the style */
}

4. Global Overline Styles:

To apply overline to all elements within a certain context, you can use the universal selector * or specify the style for a particular element.

* {
  text-decoration: overline;
}

5. Browser Defaults:

Browsers typically have default styles for certain HTML elements. For example, most browsers will apply an overline to hyperlinks (<a> tags) by default. You can override or modify these defaults with your styles.

6. Removing Overline:

If you want to remove the overline, set text-decoration: none;

.no-overline {
   text-decoration: none;
}

7. Accessibility Considerations:

Ensure that the overline does not negatively impact text readability. Consider high contrast between text and background for accessibility.

Following these steps, you can add an overline effect to text using CSS. Customize the color, style, and other properties to achieve the desired visual result for your design.

Short Overline

Creating a short overline effect in CSS is similar to creating a short underline. You can use the ‘border-top’ property to add a line above the text, creating the overline effect. Here’s a step-by-step explanation:

1. Basic Short Overline:

.short-overline {
   border-top: 2px solid #333; /* Adjust thickness and color as needed */
}

In this example:

  • .short-overline is a class that you can apply to HTML elements containing text.

  • border-top: 2px solid #333; creates a solid black line (#333 represents the color) above the text, and you can adjust the pixel value to change the thickness.

2. Applying to Text:

<p class="short-overline">Text with Short Overline</p>

3. Adjusting Length:

To control the length of the overline, you can use the width property in conjunction with border-top.

.short-overline {
   border-top: 2px solid #333;
   width: 50%; /* Adjust the width to control the length of the overline */
}

4. Positioning:

If you want to position the short overline at a specific distance from the text, you can use the ‘margin-top’ property.

.short-overline {
   border-top: 2px solid #333;
   width: 50%;
   margin-top: 5px; /* Adjust the margin to control the distance from text */
}

5. Adding Animation (Optional):

You can add animation for a dynamic effect. For example, a transition on the ‘width’ property creates a smooth animation.

.short-overline {
   border-top: 2px solid #333;
   width: 50%;
   margin-top: 5px;
   transition: width 0.3s ease-in-out;
}

.short-overline:hover {
   width: 100%; /* Adjust the width on hover */
}

6. Browser Compatibility:

Ensure compatibility across different browsers, especially if you’re using more advanced CSS features.

7. Accessibility Considerations:

Always consider accessibility. Ensure that the short overline does not negatively impact text readability.

By following these steps, you can create a short overline effect in CSS. Adjust the thickness, color, length, and other properties to achieve the desired visual result.

Marker-Style Underline

Marker-style underline means an underline effect that resembles marker strokes or highlights, which can be achieved by using CSS. The idea is to create a series of repeating shapes or elements that form a visual pattern resembling a marker-styled underline. Here’s an example and explanation:

1. Basic Marker-Style Underline:

.marker-underline {
  display: inline-block;

  position: relative;

  text-decoration: none; /* Remove the default underline */

  color: #333; /* Set the text color */
}

.marker-underline::after {
  content: "";

  position: absolute;

  bottom: -2px; /* Adjust the distance from the text */

  left: 0;

  width: 100%;

  height: 6px; /* Adjust the height to control the thickness of the underline */

  background-color: #ffcc00; /* Set the color of the marker-style underline */

  z-index: -1; /* Place it below the text */
}

In the above example:

  • .marker-underline is a class that you can apply to inline elements containing text.

  • display: inline-block; makes sure the inline element behaves like a block element, allowing the positioned pseudo-element to be relative to it.

  • position: relative; on the parent ensures that the ::after pseudo-element is positioned relative to the parent element.

  • text-decoration: none; removes the default underline, allowing us to create a custom marker-style underline.

  • The ::after pseudo-element is used to create the marker-style underline.

2. Applying to Text:

Apply the class to the HTML element containing the text.

<span class="marker-underline">Text with Marker-Style Underline</span>

3. Adjusting Colors and Styles:

Customize the colors and styles to achieve the desired marker-style effect.

.marker-underline::after {

background-color: #4caf50; /* Set a different color for the marker-style underline */

/* ... other styling properties ... */

}

4. Adjusting Distance and Thickness:

Modify the ‘bottom’ property to control the distance from the text and adjust the ‘height’ property to control the thickness of the marker-style underline.

.marker-underline::after {

bottom: -4px; /* Adjust the distance from the text */

height: 8px; /* Adjust the thickness of the marker-style underline */

/* ... other styling properties ... */

}

5. Animation (Optional):

You can add animation for a dynamic effect.

.marker-underline::after {
  transition: height 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.marker-underline:hover::after {
  height: 12px; /* Adjust the height on hover */

  background-color: #ff6666; /* Change color on hover */
}

By following these steps, you can create a marker-style underline effect in CSS. Adjust the colors, distance, thickness, and other properties to achieve the desired visual result.

How do you underline in CSS?

As discussed in this article, you can underline a text by using the text-decoration property. Please refer to the Text Underline section in this article.

Wrapping Up Text Underline in HTML

In conclusion, CSS provides a wide range of properties to apply various styles of underlining to text. From basic underlines to more complex styles such as gradient, short, animated, multi-line, and marker-style underlines, the possibilities are vast.

The same principles shared in this article can be applied to create overlines. It’s important to test your styles across different browsers for compatibility and always consider accessibility when designing your underlines.

With a good understanding of these techniques, you can enhance the visual presentation of your content and improve user experience on your web pages.

You can watch the video tutorial below for more context on styling underlines in CSS.

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:

  • Purecode 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