How Can I Change the Color of the Underline Beneath Text?

Modifying Text Underline Color

Changing the color of the underline beneath text can be achieved using certain CSS properties.

Option 1: text-decoration-color (Modern Browsers)

For modern browsers that support the text-decoration-color property, you can set a color directly, as follows:

<code class="css">text-decoration-color: green;</code>

Option 2: border-bottom for Older Browsers

If the text-decoration-color property is not supported, you can use a workaround involving a border on the bottom edge of the text:

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

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

This method allows you to create a colored line beneath the text, simulating the effect of an underline.

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