Sick and tired of boring old underlines to show that a bit of text is a link? Here’s a really quick bit of CSS to show a dotted underline on your links.
It’s so easy to do this that it hurts. We’re just swapping the underline for a border.
Dotted Underline on Hover Only
a:link, a:visited { text-decoration: none; } a:hover { border-bottom: 1px dotted #000; }
What this does is remove the underline from the text so that when it’s not being hovered over there’s no underline. On hover, the dotted border appears.
Dotted Underline At All Times
a:link, a:visited { text-decoration: none; border-bottom: 1px dotted #000; }
This removes the underline and replaces it with the dotted border at all times.
Obviously a dotted border isn’t the only option out there. Play around with the other options and see what looks good and fits your site the best. Here’s the list of all of the types of borders that you can do.
CSS Border Types
p.solid {border-style: solid; } p.double {border-style: double; } p.groove {border-style: groove; } p.dotted {border-style: dotted; } p.dashed {border-style: dashed; } p.inset {border-style: inset; } p.outset {border-style: outset; } p.ridge {border-style: ridge; } p.hidden {border-style: hidden; }
About Robb
Hi, I'm Robb Clarke - a Fredericton, New Brunswick based Web Designer and Developer. I'm currently working with OrangeSprocket as one of their Front End Developers. Please take a look around my site and give the Blog a read (or the Shorts if you're looking for a shorter read about none industry related stuff) or stop by my Portfolio to see what I've been up to lately. Most importantly - don't be a stranger.