apply CSS to half of a character using css

<span class="half" data-content="S">s</span>
<span class="half" data-content="A">a</span>
<span class="half" data-content="T">t</span>
<span class="half" data-content="I">i</span>
<span class="half" data-content="S">s</span>
<span class="half" data-content="H">h</span>

<style>
     .half {
    position:relative;
    display:inline-block;
    font-size:80px;
    overflow:hidden;
    white-space: pre;
    color: #f00;
    text-transform:uppercase;
}
.half:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content);
    pointer-events: none;
    overflow:hidden;
    color: #000;
}

</style>