How to Remove the Underline from Links
If you don't want your links to be underlined, add the following to your rules:
- Code:
-
text-decoration: none ;
For example, if you don't want any of your links to be underlined, your code might look like the following:
- Code:
-
a:link {
color: blue ;
background-color: transparent ;
text-decoration: none ;
}
However, before you rush out to remove the underlining from all your links, be aware that links that are blue and underlined are well-established as a standard on the Internet. Just about everyone who sees blue underlined text on a site automatically knows that it denotes a clickable link. If you change the colour of your links and remove the underlining, your visitors may not even realise that they can click the link for more information, mistaking it for an attempt at creating a colourful page. Even if you put a cute graphic beside the link to try to indicate that it is a link, most people will just regard it as a decorative picture and not realise what it symbolizes. This is because there is no universally recognised method of graphically depicting a link other than using blue underlined text.
This doesn't mean that you're stuck with blue underlined text for links. I only write this so that you know that there are downsides to changing the defaults that everyone expects. If you need (or want) to remove the underlining anyway, try to find a way to compensate for the lack of visual cues for your links. The hover effects described earlier may help a bit, although they only work if your visitor actually moves his/her mouse over the link.