JSFiddle - React, Tailwind, and code Playground

by Kevin_Granger

HTML

<script src="http://fonts.googleapis.com/css?family=Libre+Baskerville"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

CSS

body{
    background-color: black;
}

.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}

.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.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: white;
}

JavaScript

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>');
});