文字の半分で違う色を指定するCSSテクニック

文字の半分から左と右で、違う色を指定するCSSテクニックについてご紹介いたします。

文字の半分で違う色を指定するCSSテクニック

HTMLはシンプルに以下のようにします。

<h1 contenteditable data-heading="Half colors">Half colors</h1>

data-headingにh1要素と同じ内容の文字を入れます。

CSSは以下のように指定します。

h1 {
 font-size: 10vw;
 top: 50%;
 left: 50%;
 margin: 0;
 transform: translate(-50%, -50%);
 position: absolute;
 color: #000;
 white-space: nowrap;
}

h1:before {
 content: attr(data-heading);
 overflow: hidden;
 position: absolute;
 left: 0;
 top: 0;
 width: 50%;
 color: #ff0000;
}

上記を指定することで、左半分は赤色、右半分は黒色になります。

あとがき

要素の文字とdata-headingの文字を重ねて、data-headingを半分だけ表示することで、色が変わったように見えています。意外と使いどころもあるのではないでしょうか。