Make the dashed underline hyperlink hover with different colors and thicknesses to create impressive effects. To do this we have to add the CSS Code below to our internal or external stylesheet. Once this code is added to your stylesheet, it will affect all hyperlinks automatically. You'll notice that the text decoration has been removed and the border-bottom property has been added to the code.
Hover over this hyperlink to see the dashed underline.
Change the underline color and thickness by editing the border-bottom property values. Change the hyperlink colors by editing the color property values.
Add the following code into the <head> section of your HTML document.
CSS Code:
type="text/css" media="screen"
a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #0000FF;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #C0C0C0;
}
a:active {
color: #FF0000;
border-bottom: 1px dashed #FF0000;
}
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 you can make site-wide changes quickly and easily. Editing only the external stylesheet instead of each individual page will save you lots of time. If you are not sure how this works, there is a demo template below which can be downloaded.
Add the following code to your external stylesheet.
CSS Code:
a {
text-decoration: none;
}
a:link {
color: #0000FF;
border-bottom: 1px solid #0000FF;
}
a:visited {
color: #0000FF;
border-bottom: 1px solid #C0C0C0;
}
a:active {
color: #FF0000;
border-bottom: 1px dashed #FF0000;
}
a:hover {
color: #000000;
border-bottom: 2px dashed #DD0000;
}
Free stylesheet with the above dashed underline hyperlink code already linked to a demo HTML document: