Question

I’m currently getting headaches from this darn pseudo-element called :first-letter. It seems to be so helpful, but ultimately does not work the way I expected.

Here’s an example on jsfiddle, how I tried and how it should look like:

FIDDLE is here

As you can see, :first-letter does nothing. I expected it to overwrite the normal link settings and also the :hover selector.

What could’ve possibly gone wrong? Any other idea how to achieve this only with CSS?

Answer 1

Instead of putting your “»” in the HTML you could put it in the CSS

http://jsfiddle.net/4DnKu/4/

a.one:before {
    content: "»";
    color:#0F0;
    padding:0 5px 0 0;
}

IMHO it shouldn’t be in the HTML either way, as it actually is only decoration.

Pseudo elements are supported by all major browsers, only one you’ll have problems with is IE<8. There you could use CSS expressions as a workaround (handle with care!):

a.one {
    *zoom: expression( (new Function('elem', '\
        if(elem.before)\
            return;\
        elem.innerHTML = "<span class=ie7-before>»</span>" + elem.innerHTML;\
        elem.before = true;\
        elem.style.zoom = "1";\
    '))(this) );
}

a.one > .ie7-before,
a.one:before {
    content: "»";
    color:#0F0;
    padding:0 5px 0 0;
}

This uses quite a few hacks, so I would not recommend using it unless you understand what is going on there.