CSSとjQueryでテキストを2色で表現する

CSSとjQueryを利用してテキストを2色で装飾することができます。
font-awesomeなどと併用したらもっと色々な表現ができそうですね。
表示サンプルはこちら

HTML

<h3>一文字ずつ</h3>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="●">●</span>
<span class="halfStyle" data-content="▲">▲</span>
<span class="halfStyle" data-content="★">★</span>

<h3>自動</h3>
<span class="textToHalfStyle">Half-style, please.</span>

CSS

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:90px; /* or any font size will work */
    color: #333; /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #000;
}

Javascript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});
</script>

参考： Is it possible to apply CSS to half of a character?