How Can I Change the Color of Underlined Text?

Changing the Color of Underlined Text

It's a common desire to style text with underlining, but what if you want to customize the color of that underline? By default, the underline shares the same color as the text, but there are ways to change this behavior for enhanced visual appeal.

To do so, modern browsers now support the text-decoration-color property, making it a straightforward task. Simply specify the desired color value, and the underline will take on that hue.

However, if you need to cater to older browsers that don't support text-decoration-color, an alternative solution exists. By setting a border on the bottom of the text, you can create the appearance of an underline. The border color can be controlled just like any other border, allowing for customization.

Here's an example using CSS:

<code class="css">a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}

a:hover {
  border-bottom-color: green;
}</code>

This approach works reliably across browsers and is a great way to add a touch of style to underlined text.

The above is the detailed content of How Can I Change the Color of Underlined Text?. For more information, please follow other related articles on the PHP Chinese website!