CSS (Cascading Style Sheets) is a powerful tool for web designers and developers to enhance the appearance of their web pages. One of the essential text styling techniques in CSS is underlining text. In this guide, we will explore various methods to underline text using CSS, including the use of keywords such as “CSS Underline,” “text-decoration property,” and more.

Understanding CSS Underline

When it comes to underlining text in CSS, the primary property you’ll encounter is the “text-decoration” property. This property allows you to add and control underlines in your text. Let’s delve deeper into the techniques:

Using the text-decoration Property

The most straightforward way to underline text in CSS is by using the “text-decoration” property. You can set it to “underline” to add a basic underline to your text. For example:

.text {
  text-decoration: underline;

Customizing Underlines

The “text-decoration” property offers some customization options to fine-tune your underlines:

  • text-decoration-line: This property allows you to choose the type of line you want, whether it’s “underline,” “overline,” “line-through,” or “underline overline.”
  • text-decoration-style: You can specify the style of the line, including “solid,” “dotted,” “dashed,” “wavy,” or “double.”
  • text-decoration-color: Set the color of your underline using a color code or name.

Alternative Methods for Underlining

While the “text-decoration” property is the most straightforward, there are alternative methods to underline text in CSS. Let’s explore a few:

Using the border-bottom Property

The “border-bottom” property allows you to create underlines with added control over padding. This method is useful for creating underlines with different thicknesses and styles. Here’s an example:

.text {
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;

Creating Gradient Underlines

For a more visually appealing underline, you can create gradient underlines using the “background” properties. This technique adds a unique touch to your text underlines. Here’s an example of a gradient underline:

.text {
  background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
  background-position: 0 100%;
  background-size: 100% 2px;
  background-repeat: repeat-x;

Marker-Style Underlines

If you want to create underlines that resemble markers or pens, you can achieve this effect using the “transform” property. It’s a creative way to style your text underlines. Here’s an example:

.text {
  transform: skew(-12deg) translateX(-50%);
  background: rgba(238, 111, 87, 0.5);


In this comprehensive guide, we’ve explored various methods to underline text in CSS, including the use of the “text-decoration” property, customizing underlines, and alternative techniques like gradient and marker-style underlines. With these techniques and a good understanding of CSS, you can add stylish and eye-catching underlines to your web content.

Remember that the choice of method depends on your design preferences and the specific requirements of your web project. Experiment with these techniques, and you’ll be able to create unique and visually appealing underlined text on your web pages.


Can I customize the underline color in CSS?

Yes, you can customize the underline color in CSS. To change the color of an underline, you can use the text-decoration-color property. This property allows you to specify the color of the underline independently from the text color. Here’s an example:

.custom-underline {
  text-decoration: underline;
  text-decoration-color: #FF5733; /* Set your desired color here */

In this example, the text will be underlined with a custom color, which is #FF5733.

Are there any CSS properties for removing underlines?

Yes, there are CSS properties to remove underlines. To remove underlines from links or text, you can use the text-decoration property and set it to none. Here’s an example:

.no-underline {
  text-decoration: none;

When you apply this CSS class to an element, it will remove the underline from the text.

How do I underline only on hover using CSS?

You can underline text only when it’s hovered over by using the :hover pseudo-class along with the text-decoration property. Here’s an example:

.underline-on-hover {
  text-decoration: none; /* Start with no underline */

.underline-on-hover:hover {
  text-decoration: underline; /* Underline on hover */

In this example, the text will have no underline by default but will underline when you hover over it.

What are the best practices for underlining titles in CSS?

When underlining titles in CSS, it’s important to follow best practices for readability and aesthetics:

  • Use underlines sparingly: Reserve underlines for important titles or links to avoid visual clutter.
  • Be consistent: Maintain a consistent underline style, color, and thickness across your website for a cohesive design.
  • Consider alternative styling: Experiment with techniques like color changes, font-weight adjustments, or background highlights to indicate titles without relying solely on underlines.
  • Test for accessibility: Ensure that underlined titles are accessible to all users, including those with visual impairments. Provide clear contrast between text and background colors.
  • Use semantic HTML: Utilize HTML heading tags (<h1>, <h2>, etc.) for titles to convey their hierarchical structure to search engines and assistive technologies.

By following these best practices, you can effectively use underlines to emphasize titles while maintaining a visually appealing and accessible design on your website.

Opt out or Contact us anytime. See our Privacy Notice

Follow us on Reddit for more insights and updates.

Comments (0)

Welcome to A*Help comments!

We’re all about debate and discussion at A*Help.

We value the diverse opinions of users, so you may find points of view that you don’t agree with. And that’s cool. However, there are certain things we’re not OK with: attempts to manipulate our data in any way, for example, or the posting of discriminative, offensive, hateful, or disparaging material.

Your email address will not be published. Required fields are marked *


Register | Lost your password?