askvity

How Do You Make the Underline a Different Color in HTML?

Published in HTML & CSS 2 mins read

You can change the underline color in HTML using CSS by overriding the default text-decoration property with a border-bottom style.

Here's how to do it:

  1. Remove the default underline: The text-decoration: none; CSS property removes the default underline.

  2. Create a border: Use border-bottom to create a custom underline. You can specify the width, style (solid, dotted, dashed), and color.

Here's an example showing how to make the underline red:

<!DOCTYPE html>
<html>
<head>
<style>
  a {
    text-decoration: none; /* Remove the default underline */
    border-bottom: 2px solid red; /* Add a red underline */
  }
</style>
</head>
<body>

<p>This is a <a href="#">link with a custom underline color</a>.</p>

</body>
</html>

Explanation:

  • a { ... }: This CSS rule targets all <a> (anchor) elements, which are typically used for hyperlinks.
  • text-decoration: none;: This removes the default underline that browsers usually apply to links.
  • border-bottom: 2px solid red;: This adds a bottom border to the link, effectively creating an underline. The values mean:
    • 2px: The thickness of the underline.
    • solid: The style of the underline (solid line). Other options include dotted, dashed, double, etc.
    • red: The color of the underline. You can use any valid CSS color value (e.g., blue, #00FF00, rgb(255, 0, 255)).

Different Underline Styles and Colors:

You can change the border-bottom values to customize the appearance:

  • Color: Use any valid CSS color value like blue, #00FFFF, or rgb(100, 100, 100).
  • Thickness: Adjust the pixel value (e.g., 1px, 3px, 5px).
  • Style: Use values like solid, dotted, dashed, double, groove, ridge, inset, or outset.

Example with a dotted blue underline:

<!DOCTYPE html>
<html>
<head>
<style>
  a {
    text-decoration: none;
    border-bottom: 1px dotted blue;
  }
</style>
</head>
<body>

<p>This is a <a href="#">link with a dotted blue underline</a>.</p>

</body>
</html>

This method provides full control over the underline's appearance, allowing you to create visually appealing and consistent links across your website.

Related Articles