HyperlinkCode.com

How to create 500 totally unique, human-quality articles in just 45 seconds ..

How To Change Hyperlink Underline Color

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 iternal 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.

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

Code

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

Output

Change Underline Color

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

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

Output

Change Underline Color and Specify Anchor Text Color

Internal CSS Hyperlink Underline Color Code

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

Code

<head>
<style>
a {
text-decoration: none;
}
a:link {
color: #000000;
border-bottom: 1px solid #FF0000;
}
a:visited {
color: #339900;
border-bottom: 1px solid #999999;
}
a:hover {
color: #DD0000;
border-bottom: 1px solid #000000;
}
</style>
</head>

Output

Change Underline Color with Internal CSS

The above style belongs in the head section of HTML documents. Change color 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.

Free web design videos! Learn the easy way to responsive (mobile friendly) web design.

External CSS Hyperlink Underline Color Code

Code

a {
text-decoration: none;
}
a:link {
color: #000000;
border-bottom: 1px solid #FF0000;
}
a:visited {
color: #339900;
border-bottom: 1px solid #999999;
}
a:hover {
color: #DD0000;
border-bottom: 1px solid #000000;
}

Output

Change Underline Color with External CSS

The above CSS code can be used in an external stylesheet. Change color 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.

More Hyperlink Codes

© Copyright 2007 - 2017 HyperlinkCode.com.
Site Admin: Ed Zivkovic. Privacy | Terms