html - 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:'0a0';
    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.

Answer 1

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:

1. 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.

2. 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.