CSS to add a dotted underline to links
shiolo - August 15, 2009 - 00:44
It's clear. Can anybody help me (I don't manage CSS) to give me some code to show all links in the web with a dotted line under it? where should I place the code?
I' using Amity Island Theme.
Thanks for the help
Dotted Line CSS styling
Do you want the dotted line to appear on the page all the time or only when somebody hovers their mouse over the link? Assuming that you want it to only appear on hover, append the Amity Island's style.css file's a:hover rule with the following (approximately on line 24, after the text-decoration:none rule):
border: 1px black dotted;Note: You can modify the thickness of the line (in pixels by changing the 1px portion) and the color of the line (the black portion, using a named color or by using a hexedacimal (e.g. #000000) color number). Also, if you ever update the Amity Island theme, you will have to remember to put this rule back in place after each update.
I would like to show the
I would like to show the dotted line everytime (not when someone hovers the mouse), but when you hover it should be a normal line. (a complete line)
thanks for the answers
CSS Example
This would still be in your theme's style.css file and you will need to update your existing CSS Rules from:
a, a:visited, a:active {
color: #2d3644;
text-decoration: none;
}
a:hover {
color: #5493ff;
text-decoration: underline;
}
To (dotted line always shown on all links, underline on hover):
a, a:visited, a:active {
color: #2d3644;
text-decoration: none;
border-bottom: 1px blue dotted;
}
a:hover {
color: #5493ff;
text-decoration: underline;
border: none;
}
Thanks! I'll try it later on
Thanks! I'll try it later on the site!
mateo