cssで文字色を2色に分ける

htmlにコードを入力。日本語部分は好きな文章で。

<p data-inverted="コースを選ぼう">コースを選ぼう</p>

1 2	<p data-inverted="コースを選ぼう">コースを選ぼう</p>

cssに下記をコピペ。色と%は各自調整。heightをwidthにすれば横半分色が変わる。

p:before {
content:attr(data-inverted);
overflow:hidden;
position:absolute;
left:0;
top:0;
height:50%;
color:rgb(161, 216, 246);
}

p:before {

content:attr(data-inverted);

overflow:hidden;

position:absolute;

left:0;

top:0;

height:50%;

color:rgb(161, 216, 246);

}

こうなる。(ベースの文字色を白、文字の下半分が隠れるような背景を設定。)