• #CSS
• #疑似要素

update:2022.8.26　1171view

テキストの文字色を半分色違いにする方法

文字を半々でそれぞれ色を変えるとオシャンティーだったり、よく使う場面としては評価の星の数が小数点だったり、、、

コピペだけで簡単にできちゃいます～

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%;
}
    

すると、こうなります！

★★★★★