Edit in JSFiddle

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

.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); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #f05128;
}

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