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

Question

我想以不同的颜色显示我的徽标文本的字母，但是使用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>

我如何使它工作？

Answer 1

先生，您在这里

演示：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>

Answer 2

您应该为它使用单独的 span 元素，因为从长远来看它会更具可读性。

CSS：

.letter1{color:red;}
.letter2{color:green;}
.letter3{color:blue;}
.letter4{color:purple;} 

HTML：

<span class='letter1'>Z</span>
<span class='letter2'>O</span>
<span class='letter3'>N</span>
<span class='letter4'>E</span>