1

ロゴテキストの文字を色分けして表示したいのですが、使い方spanが荒く、JavaScriptを使うとページの読み込みが遅くなります。:beforeそのため、同じ要素の複数のクラスを使用して CSS 疑似要素を使用しようとしましたが、機能しません。最後のクラスの文字、つまり のみが表示されます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>

どうすれば機能しますか？

4

2 に答える 2

2

こちらが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-27T08:29:35.533 に答える
0

長期的にはより読みやすくなるため、個別の 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-27T08:18:23.613 に答える