CSSを使ってテキストカラーを半々に表示させる方法

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。

※以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。
また、position: relative;とdisplay: inline-block;の部分は使用する箇所によっては別の値に変更したり不要なら削除してください。

疑似要素とdata属性を使う

このデモで表示されているようにテキストのカラーが中央を境に半々になっているのを疑似要素とdata属性を使って実装する方法です。

まずHTMLは下記のようなものを使用し、その際に中に記述する内容と同じテキストをdata属性（data-split）にも記述します。

HTML

<p data-split="split text color">split text color</p>

CSSは必要な記述のみ抜き出すと下記のようになります。

CSS

p {
  position: relative;
  display: inline-block;
  color: #3498db;
  white-space: nowrap;
}
p::before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-split);
  width: 50%;
  color: #fff;
  overflow: hidden;
}

具体的には、まずp要素内にあるテキストについてはカラー指定をブルーにしてそのまま表示させ、その上に疑似要素とdata属性を使って表示させた文字をカラー指定をホワイトにして重ねます。
ただこのままだとすべての文字がホワイトの見栄えになるので、疑似要素が半分だけ表示されるような形にするためにwidth: 50%;とoverflow: hidden;を指定することで、デモにあるようなカラーが半々になる見栄えにできます。

上下で半々にする

先ほどは左右でカラーを半々にしましたが、少し記述を変更すれば上下でカラーを半々にすることもできます。
HTMLは先ほどと同じものを利用し、CSSは下記のように基本的なCSSはほぼ一緒で、先ほどwidth: 50%;としていた箇所をheight: 50%;にすれば実装できます。

CSS

p {
  position: relative;
  display: inline-block;
  color: #3498db;
  white-space: nowrap;
}
p::before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-split);
  height: 50%;
  color: #fff;
  overflow: hidden;
}

background-clipを使う

見栄えは上で紹介したものと一緒ですが、background-clipを使うことでよりシンプルな記述で実装することができます。
ただ、記述はシンプルにできますがこの方法は一部ブウラザでは使用できない方法でもあるので、それらサポートする必要がある場合は上で紹介した方法で実装してください。

まずHTMLは先ほどのようにdata属性の記述は不要で、下記のような単純なものを使用します。

HTML

<p>split text color</p>

CSSは必要な記述のみ抜き出すと下記のようになります。

CSS

p {
  position: relative;
  display: inline-block;
  background: linear-gradient(-90deg, #3498db 50%, #ffffff 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

先ほどはテキストのカラーは2箇所でcolorを使って指定していましたが、こちらの場合はbackground: linear-gradient();を使って背景カラーを半々で表示し、そこにbackground-clipとtext-fill-colorを指定することで見栄えを実装しています。

上下で半々にする

こちらも上下でカラーを半々にするのは簡単で、この実装方法の場合もHTMLと基本的なCSSは一緒でbackground: linear-gradient();の記述を少し変更することで実装できます。

CSS

p {
  position: relative;
  display: inline-block;
  background: linear-gradient(#ffffff 50%, #3498db 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}