update: 1071view
テキストの文字色を半分色違いにする方法
文字を半々でそれぞれ色を変えるとオシャンティーだったり、よく使う場面としては評価の星の数が小数点だったり、、、
コピペだけで簡単にできちゃいます～
cssだけでテキストを半分で文字色を変える
疑似要素を使って2つのテキストをそれぞれ色を変えたものにして上に乗せる、というやり方です。
HTMLの記述
<p class="txt" data-star="★">★</p>
data属性に半分にしたいテキストを設定し、疑似要素からを取得します。
CSSの記述
.txt{
color: #fff;
display:inline-block;
position:relative;
}
.txt::before{
color: #ffdd00;
content: attr(data-star);
width: 50%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}
すると、こうなります！
★
例えば、評価を星で示していた時に3.5、4.5の場合は、txtのbeforeのwidthを調整してみてください。
3.5の場合
<p class="txt t3" data-star="★★★★">★★★★★</p>
txtにt3のクラスを付与し、cssは先ほどの後に追加、もしくはwidthだけを変更。
.txt.t3::before{
width: 70%;
}
すると、こうなります！
★★★★★
4.5の場合
<p class="txt t4" data-star="★★★★★">★★★★★</p>
txtにt4のクラスを付与し、cssは先ほどの後に追加、もしくはwidthだけを変更。
.txt.t4::before{
width: 90%;
}
すると、こうなります！
★★★★★
