Result

jQuery

//テキストを取得
var textToHalfStyle = $('.textToHalfStyle').text();
//splitメソッドで分割
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
//テキストを追加し、CSSで重ねる
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

css

.halfStyle {
    position:relative;
    display:inline-block;
    width:1;
    font-size:50px;
    color: #0faed7;
    overflow:hidden;
    white-space: pre;
  
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); 
    overflow:hidden;
    color: #f05128;
}

html

<span class="textToHalfStyle">あいうえお</span>

via

Is it possible to apply CSS to half of a character?