css - 如何使用CSS伪元素:在同一元素的多个类中

我想以不同的颜色显示徽标文本的字母，但是使用span非常粗糙，使用JavaScript会减慢页面加载时间。因此，我尝试使用CSS伪元素:before，并使用同一元素的多个类，但该类不起作用。它仅显示最后一个字母，即letter4。这是代码：

.letter1:before {
    content:"Z";
    color:red;
}
.letter2:before {
    content:"O";
    color:green;
}
.letter3:before {
    content:"N";
    color:blue;
}
.letter4:before {
    content:"E";
    color:purple;
}

和HTML：

<span class='letter1 letter2 letter3 letter4'> </span>

我该如何运作？

最佳答案

这是您先生

演示：http://jsfiddle.net/7UjgL/

风格：

.letter{
 width:40px;
 height:20px;
position:relative;
letter-spacing: 26px;
}

.letter:first-letter{
color:red;
}

.letter:before,.letter:after{
    position:absolute;
    top: 0px;
}
.letter:before{
    content: 'o';
    color: green;
    left: 11px;
}

.letter:after{
    content:'n';
    color:blue;
    left: 22px;
}

标记：

<div class=letter>ze</div>

关于css - 如何使用CSS伪元素:在同一元素的多个类中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18460337/