<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<style>
.halfStyle {
/* base char and also the right 1/3 */
position: relative;
display: inline-block;
font-size: 80px;/* or any font size will work */
color: transparent;/* hide the base character */
overflow: hidden;
white-space: pre;/* to preserve the spaces from collapsing */
color: #1c87c9;/* for demo purposes */
text-shadow: 2px 2px 0px #eee;/* for demo purposes */
}
.halfStyle:before {
/* creates the left 1/3 */
display: block;
z-index: 2;
position: absolute;
top: 0;
width: 33.33%;
content: attr(data-content);/* dynamic content for the pseudo element */
overflow: hidden;
pointer-events: none;/* so the base char is selectable by mouse */
color: #8ebf42;/* for demo purposes */
text-shadow: 2px -2px 0px #eee;/* for demo purposes */
}
.halfStyle:after {
/* creates the middle 1/3 */
display: block;
z-index: 1;