Can I Change the Color of an Underline in Text?

Customize Text Underline Color

Q: Is it possible to alter the color of the line drawn under a text?

A: Yes, you can now effortlessly change the underline color using CSS.

For Modern Browsers (text-decoration-color support):

To specify the underline color, use the following rule:

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

For example, to create red text with a blue underline, the code would be:

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

For Older Browsers (border-bottom method):

If your browser does not support text-decoration-color, an alternative method involves creating a border underneath the text:

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

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

In this example, it creates a blue underlined link that turns green on hover.

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