How to apply CSS to half of a character?

Note :- Insert jQuery file in the example.

<script src="jquery-1.11.1.min.js"></script>

<style type="text/css">

html{
font-family:'Montserrat';
}

.myStyle {
    position:relative;
    display:inline-block;
    font-size:80px;
font-weight: bold;
    color: transparent;
    overflow:hidden;
    white-space: pre;
}

.myStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content);
    overflow:hidden;
    pointer-events: none;
    color: #8e44ad;
}
.myStyle:after {
    display:block;
    direction: rtl;
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content);
    overflow:hidden;
    pointer-events: none;
    color: #1abc9c;
}

</style>

<p><h2>By MaHiii</h2></p>

<span class="whatever">CSS Tution</span>

<script type="text/javascript">

$(function(){

jQuery(function($) {
var text, chars, $mahi, i, output;
$('.whatever').each(function(idx, mahi) {
$mahi = $(mahi);
text = $mahi.text();
chars = text.split('');

$mahi.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

output = '';

for (i = 0; i < chars.length; i++) {
output += '<span aria-hidden="true" class="myStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
}

$mahi.append(output);
});
});
});

</script>


Output :)