This page shows how to make dashed and dotted 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 below.


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.

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.

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

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

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.

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


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