Is it possible to apply CSS to half of a character?

What I am looking for:

A way to style one HALF of a character. (In this case, half the letter being transparent)

What I have currently searched for and tried (With no luck):

• Methods for styling half of a character/letter

• Styling part of a character with CSS or JavaScript

• Apply CSS to 50% of a character

Below is an example of what I am trying to obtain.

Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.

Now on GitHub as a Plugin!

Feel free to fork and improve.

Demo | Download Zip | Half-Style.com (Redirects to GitHub)

• Pure CSS for a Single Character

• JavaScript used for automation across text or multiple characters

• Preserves Text Accessibility for screen readers for the blind or visually

impaired

Part 1: Basic Solution

Demo: http://jsfiddle.net/arbel/pd9yB/1694/

This works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Also, the accessibility of the original text is preserved for screen readers for the blind or visually impaired.

Explanation for a single character:

Pure CSS. All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled.

For each span element containing the character, you can create a data attribute, for example here data-content="X", and on the pseudo element use content: attr(data-content); so the .halfStyle:before class will be dynamic and you won't need to hard code it for every instance.

Explanation for any text:

Simply add textToHalfStyle class to the element containing the text.



// jQuery for automated mode
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('' + text + '');

// Reset output for appending
output = '';

// Iterate over all chars in the text
for (i = 0; i
.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; / or any font size will work /
color: black; / 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: #f00;
}



Single Characters:
X
Y
Z
A



Automated:

Half-style, please.



(JSFiddle demo)

Part 2: Advanced solution - Independent left and right parts

With this solution you can style left and right parts, individually and independently.

Everything is the same, only more advanced CSS does the magic.



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('' + text + '');

// Reset output for appending
output = '';

// Iterate over all chars in the text
for (i = 0; i
.halfStyle {
position: relative;
display: inline-block;
font-size: 80px; / or any font size will work /
color: transparent; / hide the base character /
overflow: hidden;
white-space: pre; / to preserve the spaces from collapsing /
}

.halfStyle:before { / creates the left part /
display: block;
z-index: 1;
position: absolute;
top: 0;
width: 50%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow: hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #f00; / for demo purposes /
text-shadow: 2px -2px 0px #af0; / for demo purposes /
}

.halfStyle:after { / creates the right part /
display: block;
direction: rtl; / very important, will make the width to start from right /
position: absolute;
z-index: 2;
top: 0;
left: 50%;
width: 50%;
content: attr(data-content); / dynamic content for the pseudo element /
overflow: hidden;
pointer-events: none; / so the base char is selectable by mouse /
color: #000; / for demo purposes /
text-shadow: 2px 2px 0px #0af; / for demo purposes /
}


Single Characters:
X
Y
Z
A



Automated:

Half-style, please.



(JSFiddle demo)

Part 3: Mix-Match and Improve

Now that we know what is possible, let's create some variations.

-Horizontal Half Parts

• Without Text Shadow:

• Possibility of Text Shadow for each half part independently:

// jQuery for automated mode
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('' + text + '');

// Reset output for appending
output = '';

// Iterate over all chars in the text
for (i = 0; i
.halfStyle {
position: relati

Stack Overflow Q#23569441, score: 3159