JSFiddle - React, Tailwind, and code Playground

HTML

<span title="TEXT"></span>

CSS

* {
    padding: 0;
    margin: 0;
}

span {
    display: inline-block;
    position: relative;
    font-size: 60px;
    line-height: 60px;
    height: 60px;
}

span:before {
    content: attr(title);
    display: inline-block;
    color: blue;
}

span:after {
    content: attr(title);
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    color: red;
    overflow: hidden;
}