nobee

update:　728view

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

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

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

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

記事のもくじ

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

すると、こうなります！

★★★★★

share

人気記事