Apply CSS to Half of a Character

Apply CSS to Half of a Character

by Nirvanachain

HTML

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>
<hr/>
<p>Automated:</p>
<span class="textToHalfStyle">Half-style, please.</span>

CSS

.halfStyle {
    position:relative;
    display:inline-block;
    width:1;
    font-size:80px;
    color: black;
    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: #f00;
}

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

// Helpful Link:

//http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character