There’s a hitch in CSS styling of HTML a tags (“anchor” tags). The problem is that a tags are used for two different purposes: to establish a target, or “anchor,” for a link (e.g. <a name="anchorname">Link to this</a>), or to mark a section of text as a hyperlink (e.g. <a href="#anchorname">links to that</a>).
The first use of anchors is rare, nowadays. Every page has a default anchor, named “#“, which is set at the top of the page, and authors rarely set additional ones. They’re most frequently seen on Wikipedia pages, of all places, where subsections of the larger page are all anchored.
The problem comes in styling. What happens is that the text which is wrapped as an anchor gets styled as though it’s a hyperlink, even though without an href= attribute, it won’t work as one. This discourages a lot of webmasters from using anchors. One typical stunt is to not wrap anything at all, to create the anchor as <a name="anchorname" /> or <a name="anchorname></a> (the latter style is how Wikipedia does it). This isn’t available, however, to people using some kind of WYSIWYG editor in a CMS.
The real solution is to properly style a tags, and by “properly” I mean “not the way the default browser styles do it.” That means clearing styles from the a tag, and applying link appearance only to the :link, :hover, :active and :visited pseudo-elements.
Here’s how we did this for a recent project:
- Style default
a tags to look just like all other text:
a {
text-decoration: inherit;
font-style: inherit;
color: inherit;
}
- Now define the
a:link pseudo-element to look the way you want your hyperlinks to appear. This pseudo-element is often ignored, but it’s the key to not applying link styles to your anchors. (We apply the same style to the :visited pseudo-element.)
a:link, a:visited {
border:none;
text-decoration:underline;
font-style:normal;
color:black;
}
- Style the other pseudo-elements, because otherwise they won’t show differently from usual text (i.e. if
:hover isn’t styled, links will appear to “disappear” when users mouse over them).
a:hover {
text-decoration: none;
color: #a3211f;
}
There’s no real trick here: all that’s involved is respecting the full definition of the a tag, and all the states allowed by its pseudo-elements.
