Как использовать псевдоэлемент CSS: раньше в нескольких классах одного и того же элемента

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

Здесь вы SIR

демо: 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>