Customizing Text Underline Colors with CSS

In web design, adding an underline to text is a common practice to emphasize or highlight information. However, what if you want to add a unique touch by changing the color of the underline? Is it possible?

Yes, it is possible to change the color of the line beneath text using CSS. Here are two methods you can use:

Method 1: Using text-decoration-color

The most straightforward approach is to use the text-decoration-color property. This property specifies the color of the underline, allowing you to customize it independently of the text color.

For example, to create red text with a blue underline, you would use the following CSS:

text-decoration-color: blue;

Method 2: Using border-bottom

An alternative method is to use the border-bottom property. This property creates a border at the bottom of the text, which can simulate an underline. By setting the border-bottom-color property, you can specify the color of the underline.

For instance, here's how you would achieve the same effect as Method 1 using border-bottom:

border-bottom: 1px solid blue;
text-decoration: none;

Note: The text-decoration-color property is supported by modern browsers. If you need to support older browsers, you may want to use the border-bottom method for compatibility.