链接中的CSS第一个字母选择器

Question

我目前正在从这个名为:first-letter的虚假伪元素中感到头痛。它似乎非常有用，但最终并没有按照我的预期运作。

以下是关于jsfiddle的示例，我如何尝试以及它应该如何：

FIDDLE是here

如您所见，:first-letter什么也没做。我希望它覆盖正常的链接设置以及:hover选择器。

什么可能出错？还有其他想法如何使用CSS实现 ？

Answer 1

不要将“»”放在HTML中，而是将其放在CSS中

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

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

恕我直言，它不应该是HTML，因为它实际上只是装饰。

所有主要浏览器都支持伪元素，只有一个你会遇到问题的是IE＆lt; 8。在那里你可以使用CSS表达式作为一种解决方法（谨慎处理！）：

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;
}

这使用了很多黑客，所以除非你了解那里发生了什么，否则我不建议使用它。