How to apply a:after to links, but not anchors? - css

Question

I would like to apply a character to the end of some of my HREFs with CSS, and I found a way that works, but it applies the character to anchors as well. I don't want the character on my anchors. So far I can only get the property to apply to whole DIVs, I can't get it to stick to a simple class that I can selectively apply only to HREFs.
Here's what I have:
#sample a:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}
Any suggestions?
My DIVs do hold some link styling, will I need to move that? Example:
#sample a:hover {
color:#CCCCFF;
text-decoration:underline;
margin-top:20px;
}
My boss says: make all the links on the site have the character, except for the links we say should not have it. Of course he has no working example to show me.

Answer 1

Just use a[href] { this means target all anchor elements that have the href attribute set. More information can be found on the W3C specification.
Example.
HTML
link
<br />
<a id="anchor">anchor</a>​
CSS
a[href]:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}​

Answer 2

The most cross-browser way in general to refer to links in CSS is to use the :link and :visited pseudo-elements (representing unvisited and visited links, respectively) instead of the selector a:
#sample :link:after, #sample :visited:after
In this case, you can just as well use the simpler method of using an attribute selector, as you are using the :after pseudo-class too (and it has slightly less limited support than attribute selectors):
#sample a[href]:after
Simplest of all, do not use the a element for purposes other than links. The use of <a name=...> has been deprecated, in favor of using the id attribute on some natural element.
Addition: The question was also about preventing the arrow for selected links. This ca be implemented so that you indicate the selection using an attribute like class=noarrow on those links and add a CSS rule that sets the generated content to empty for them:
#sample :link.noarrow:after, #sample :visited.noarrow:after {
content: "";
}
This might be a better approach than using the :not(...) selector, due to issues in browser support. But on modern browsers, the following approach works, too: Instead of two rules, use just one rule that excludes the specific class:
#sample :not(.noarrow):link:after, #sample :not(.noarrow):visited:after {
content: "\00bb"; /* Unicode hex for » */
padding-left: 2px;
}
It’s a yet another question how to prevent the underlining of the arrow (the generated content). The trick used in the question does not seem to work on IE. Besides, it makes the arrow overlay text. I have no good answer to this issue, and I think it would best be discussed as a separate question (unless you can find it discussed in existing questions).

Answer 3

I'd add a class name to the anchors and over-write the declared CSS used on the links.