HyperlinkCode.com

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

How To Make Dashed Underline Hyperlink Hover Effects

This page shows how to make dashed underline hyperlink hover effects such as different colors and thicknesses. To do this we have to add the CSS below to our internal or external stylesheet. Once this code is added to the stylesheet, it will affect all hyperlinks automatically. See the demo.

Dashed Underline Hover Demo

Demo

The default hyperlink underline has been removed by setting the text-decoration property value to none, and the border-bottom property has been added to the code.

Internal CSS Hyperlink Underline Color Code

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

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

Code

<head>
<style>
a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #FF0000;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #C0C0C0;
}
a:hover {
color: #000000;
border-bottom: 2px dashed #DD0000;
}
</style>
</head>

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 Stylesheet

The following CSS code goes into the external stylesheet. Change variables as required.

Code

a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #FF0000;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #C0C0C0;
}
a:hover {
color: #000000;
border-bottom: 2px dashed #DD0000;
}

If your website has more than one page, it is a good idea to use an external stylesheet so that site-wide changes can be made quickly and easily. Check the simple instructions, or download the demo template below.

Download Demo Webpage and Stylesheet

Free stylesheet with the above dashed underline hyperlink code already linked to a demo HTML document:

Download - dashed-underline-demo.zip - 3KB

More Hyperlink Codes

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