Dealing with ugly Link Underlining
We pride outselves on having great design skills. But you cannot just throw usability and accessability out the window when trying to acheive a good design.
I recently read an article at Usability Post about the 7 most common usability mistakes. While they were all valid, the most commented on was the underlinging of links on a page.
Yes, they’re ugly. But we can fix that. How? CSS!
Try something like this :
a {
text-decoration:none;
border-bottom:1px dotted #ccc;
}
This will make your links a little less obvious (said: ulgy) with an outcome like this. You can play with the border type, between solid, dotted and dashed. You can still have an underline on hover by adding :
a:hover {
text-decoration:underline;
border-bottom: none;
}
I hope this helps out with your linking dilemmas in the future. Please let me know what sort of tips and tricks you would like to see on our site.