Как сделать текст разноцветным по вертикали с помощью CSS

Как сделать текст разноцветным по вертикали с помощью CSS

Сразу пример, затем пояснения ...

[data-two-colors]
стили будут применяться к любому элементу с атрибутом data-two-colors, в нашем случае к <span>.
color: red;
цвет основного текста (нижней части).
position: relative;
относительное позиционирование; нужно для того, чтобы добавляемый с помощью свойства content (см. ниже) текст лёг сверху текущего, то есть спозиционировался относительно основного.
[data-two-colors]::after
стили будут применяться к контенту, который добавляется после элемента (::after) с атрибутом data-two-colors.
color: green;
цвет добавляемого текста (верхней части).
content: attr(data-two-colors);
добавление текста из атрибута data-two-colors; значение этого атрибута должно полностью совпадать с содержимым элемента.
height: 0.5em;
высота добавляемого текста (верхней части); значение меньше 0.5 уменьшает занимаемую площадь, значение больше — увеличивает.
overflow: hidden;
обрезка текста, выходящего за пределы высоты height.
position: absolute;
left: 0;
абсолютное позиционирование и сдвиг в крайнюю левую точку; при абсолютном позиционировании добавляемый контент выйдет из основного потока и не будет влиять на другие элементы, а позиция left: 0; сдвинет его в крайнюю левую точку родителя с position НЕ static, то есть нашего <span>.
↑
↓