Combine a:visited with a:after, or chaining pseudo-classes with pseudo-elements

Question

Let's say I wanted to add a shape (like a checkmark) next to a link after it has been visited, instead of having it just turn purple, using a:after along with a:visited.

I'm unsure if I should select the shape like this:

a:visited:after {

or like this:

a:visited a:after

or

a:visited :after {

(i'm also a bit fuzzy on when I should or shouldn't add a space before a pseudo-element, or does it even matter?)

or perhaps something different?

Right now my css looks like this:

a:visited:after {
    /* check mark shape */
    content:'\00a0';
    color: black;
    position: relative;
    left:15px;
    display:inline-block;
    width: 3px;
    height: 6px;
    border: solid black;
    border-width: 0 2px 2px 0;  
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}

check mark shape code from http://webitect.net/design/webdesign/creating-fancy-bullet-points-with-pure-css3/

Thanks for any help.

[White space is a descendant selector.](http://www.w3.org/TR/CSS2/selector.html#descendant-selectors) — Jared Farrish, Sep 09 '12 at 20:13

BoltClock · Accepted Answer · 2013-12-13T11:09:47.480

29

You're supposed to use a:visited:after as you're currently doing. It doesn't work not because of an error in your code, but because the issue lies in the :visited pseudo-class — it doesn't permit the use of pseudo-elements because of privacy concerns.

So basically, you won't be able to apply your checkmark icon to visited links only.

Regarding this:

(i'm also a bit fuzzy on when I should or shouldn't add a space before a pseudo-element, or does it even matter?)

It does matter, because the space represents a descendant combinator:

The selector a:visited a:after represents the :after pseudo-element of an a that is a descendant of another a which is a visited link, which in HTML doesn't quite make sense.
The selector a:visited :after is similar to a:visited a:after, except it represents :after of any kind of descendant of a:visited.

It can be rewritten as a:visited *:after. See the universal selector in the spec.

By omitting the space, you're applying the pseudo-element directly to the element represented by the selector before it, which in your case is a:visited, not any of its descendants.

edited Dec 13 '13 at 11:09

answered Sep 09 '12 at 20:11

BoltClock

700,868
160
1,392
1,356

3

While I realise that the OP used `:after` in his original question, doesn't the W3C recommend using the double-colon syntax for pseudo-elements: `::after`? – David Thomas Sep 09 '12 at 20:13
2

@David Thomas: You can still use the single-colon syntax for CSS1 and CSS2 pseudo-elements if you want to maintain compatibility with IE < 9. If you don't need to support older browsers, yes you should start using double colons for pseudo-elements. Single colons aren't permitted for any new pseudo-elements. – BoltClock Sep 09 '12 at 20:16
What is the difference between a *combinator* and a *selector*? – Jared Farrish Sep 09 '12 at 20:17
4

@Jared Farrish: *selector* is a general (and broad) term; *combinator* refers to a symbol that indicates a relationship between two compound selectors; e.g. `#parent > .child`. I have another answer [here](http://stackoverflow.com/questions/9848556/correct-terms-and-words-for-sections-and-parts-of-selectors/9849403#9849403) with an entire glossary of definitions, although I'm not sure if that should be moved to a wiki or something since the question wasn't expecting the whole glossary. – BoltClock Sep 09 '12 at 20:18
@DavidThomas I wasn't aware of that either, thanks for the note. BoltClock: Thanks for the extra info on the space, makes sense! – LazerSharks Sep 09 '12 at 20:22
On a last note... It doesn't seem to make complete sense that they allow the color and decoration of visited links to be changed but not in other ways that are also simple visual changes... – LazerSharks Sep 09 '12 at 20:31
1

@ShaltNot: Agreed, I never liked this decision myself. If APIs need to lie about the state of a link that's fine, but limiting the styling capabilities seems like handwaving to me. – BoltClock Sep 09 '12 at 20:33
1

@BoltClock, I would place a simple div below your links and make the font size of your links bigger if they are visited. Then I can find out whether you have visited that link simply by querying the position of the div below it.There are more scheming ways of course, but that's the general idea. – Pacerier May 04 '14 at 14:33
@Pacerier: I never said it couldn't be circumvented by other means, and besides, that has nothing to do with the question at hand. – BoltClock May 04 '14 at 14:42
@BoltClock, I was commenting on your point regarding "limiting the styling capabilities seems like handwaving". Why do you call those limits handwaving? – Pacerier May 04 '14 at 14:44
@Pacerier: Oh, that. Then yes, you're right - I was thinking in terms of the link element itself and not surrounding elements. – BoltClock May 04 '14 at 14:52

Combine a:visited with a:after, or chaining pseudo-classes with pseudo-elements

1 Answers1

Linked