Dashed and Dotted Underlines
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.
Demo - Dashed Underline Hyperlink on Hover
Hover over this hyperlink to see the dashed underline.
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.
Code - CSS
<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>
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.
External Stylesheet
The following CSS code goes into the external stylesheet. Change variables as required.
Code - CSS
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
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
