How it works ..
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.
Code To Change Hyperlink Underline Color
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.
Code - Inline CSS
<a href="change-underline-color.php" style="text-decoration: none; border-bottom: 1px solid red;">Change Underline Color</a>
Output
Specify Anchor Text 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.
Code - Change Anchor Text Color
<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>
Output
Change Underline Color and Anchor Text Color
Internal CSS Hyperlink Underline Color Code
The following code changes link underline and color for link, visited, and hover action.
Code - Internal CSS
<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>
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.
Output
Change Underline Color with Internal CSS
External CSS Hyperlink Underline Color Code
Code
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;
}
Output
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.
Hyperlink Articles
- How to make a hyperlink.
- How to make underline hover effects.
- How to open a hyperlink in a new window.
- How to hyperlink bookmark on the same page.
- How to change hyperlink color.
- How to remove hyperlink underline.
- How to make an image hyperlink.
- How to change hyperlink underline color.
- How to make email address hyperlink.
- How to make a link button.
Advertisement
