<!DOCTYPE html>
<html>
<head>
<title>Half Styling Character</title>
<script src=
</script>
<style type="text/css">
.halfStyled {
position: relative;
display: inline-block;
font-size: 80px;
color: black;
overflow: hidden;
white-space: pre;
}
.halfStyled:before {
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 50%;
content: attr(data-content);
overflow: hidden;
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<span class="geeks">GeeksforGeeks</span>
<h3>A Computer Science Portal for Geeks</h3>
<script type="text/javascript">
jQuery(function($) {
var text, chars, $el, i, output;
// Iterate over all class occurrences
$('.geeks').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="halfStyled"'
+ 'data-content="' + chars[i] + '">'
+ chars[i] + '</span>';
}
// Write to DOM only once
$el.append(output);
});
});
</script>
</body>
</html>