Result
http://jsfiddle.net/pd9yB/413/embedded/result,js,css,html
jQuery
//テキストを取得 var textToHalfStyle = $('.textToHalfStyle').text(); //splitメソッドで分割 var textToHalfStyleChars = textToHalfStyle.split(''); $('.textToHalfStyle').html(''); //テキストを追加し、CSSで重ねる $.each(textToHalfStyleChars, function(i,v){ $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>'); });
css
.halfStyle { position:relative; display:inline-block; width:1; font-size:50px; color: #0faed7; overflow:hidden; white-space: pre; } .halfStyle:before { display:block; z-index:1; position:absolute; top:0; width: 50%; content: attr(data-content); overflow:hidden; color: #f05128; }
html
<span class="textToHalfStyle">あいうえお</span>