Posted 5 years ago #
I know this is basic css but I'm having trouble. I'm using the semiologic theme. I would like all the links on my blog to be dotted when hovered over (text decoration). Can someone tell me what I need to put in my custom.css file to do this?
Thanks,
John
Hello
Try this after the a:visited selector in the css file.
a:hover {
border-bottom: 1px dotted #333;
padding-bottom: 1px;
}
Adjust color and padding as needed.
Hope it helps :)
ya, but don't forget to set
text-decoration:none;
Otherwise you'll get the usual underline on the link and it'll look funky.
Hello
yes that is a good point, thanks for mentioning that!
a:hover {
text-decoration: none;
border-bottom: 1px dotted #333;
padding-bottom: 1px;
}
Posted 5 years ago #
Thanks for the great response.
I don't even see an a:visited selector in the custom.css file. I guess I'm supposed to put it in there.
What does the a:visited selector entail.
John
Posted 5 years ago #
cool, it worked.
thanks so much
John
a:visited gives you styling options for links that have been clicked on (visited).
a:hover gives you styling options for when someone passes the mouse over a link.
a:focus gives you styling options for when someone tabs to the link. It's a good idea to style a:hover and a:focus together with the same styles.
Hello
All the above info is correct, though to add more to it, there is also a:active for when the link is actually being pressed.
The order should be:
a:link {
property: value;
}
a:visited {
property: value;
}
a:hover, a:focus {
property: value;
}
a:active {
property: value;
}
Hope it was useful. :)
Bpartch! Thanks, I had a feeling I was forgetting something, and it's something quite obvious... LOL
Posted 5 years ago #
thank you again
John
This topic has been closed to new replies.
