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

我想用不同的颜色显示我的徽标文本的字母，但使用span非常粗糙，使用JavaScript会减慢页面加载时间。所以我尝试使用CSS伪元素:before，使用多个相同元素的类，但它不起作用。它只显示最后一班的字母，即letter4。下面是代码：如何使用CSS伪元素：before在同一元素的多个类中

.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>

我如何工作的呢？

来源

2013-08-27 robinton

那是因为你只能有一个'：before'每个元素。最后一个覆盖前一个。 – putvande

请参阅http://stackoverflow.com/editing-help以获取正确格式化您帖子的帮助。 – BoltClock

你应该像这样分开http://jsfiddle.net/clink/DBrg5/ –

给你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>

来源

2013-08-27 08:29:35

您应该为它使用单独的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>

来源

2013-08-27 08:18:23

你写的代码已经被我使用了，我不想要这个。用css做这件事情：之前不可能？ – robinton

@robinton：这是不可能的。在CSS2.1中，每个元素一次只能有一个'：before'伪元素。 – BoltClock

是的，这是不可能的，因为：在对HTML元素进行工作之前，不会分开字母，并且每个字母都会被覆盖。 @putvande已经提到过。 –

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

回答

相关问题