Changing the underline color of a hyperlink is quickly and easily done by adding CSS code to the HTML hyperlink code. This page also covers how to change underline color using internal and external CSS.



The underline first has to be removed with the text-decoration property value of none and then we add the border-bottom property with 3 short-hand CSS values of 1px solid #999999.

1px = Variable border width in pixels which in this case is used as the hyperlink underline width.
solid = Border style (solid, dotted, or dashed)
#999999 = Color code. Use this variable to change colors.

See hex color chart and color names chart to get more colors.

<a href="change-underline-color.php" style="text-decoration: none; border-bottom: 1px solid red;">Change Underline Color</a>


Change Underline Color


One color can be used for the hyperlink anchor text and a different color for the underline. This is handy if you don't want the standard default colors for link and visited link.

<a href="change-underline-color.php" style="text-decoration: none; border-bottom: 1px solid #ff0000; color: #000000;">Change Underline Color and Anchor Text Color</a>


Change Underline Color and Anchor Text Color

The following code changes link underline and color for link, visited, and hover action.

<head>
<style>
a {
text-decoration: none;
}
a:link {
color: Black;
border-bottom: 1px solid Red;
}
a:visited {
color: Purple;
border-bottom: 1px solid Gainsboro;
}
a:hover {
color: SeaGreen;
border-bottom: 1px solid Black;
}
</style>
</head>


The above style belongs in the head section of HTML documents. Change color names and other values as required. This Internal CSS will only Change Hyperlink Underline Colors on the page where the code is inserted. If you need to manage multiple pages at once, an external stylesheet is recommended.

Change Underline Color with Internal CSS



a {
text-decoration: none;
}
a:link {
color: Black;
border-bottom: 1px solid Red;
}
a:visited {
color: Purple;
border-bottom: 1px solid Gainsboro;
}
a:hover {
color: SeaGreen;
border-bottom: 1px solid Black;
}


Change Underline Color with Internal CSS


The above CSS code can be used in an external stylesheet. Change color names and other values as required. External stylesheets can be used to control all hyperlinks on an entire website by editing just one file. Many different hyperlink effects can be acheived to improve the look and feel of any website. View instructions.


Web Design