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

itemprop="text">

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.

src="https://i.stack.imgur.com/SaH8v.png"
alt="x">

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.

/>

UPDATE:

Since
many have asked why I would ever want to style half of a character, this is why. My city
had recently spent $250,000 to define a new "brand" for itself. This href="https://web.archive.org/web/20140428135239/http://halifaxdefined.ca/img/halifax_logo_new.png"
rel="noreferrer">logo is what they came up with. Many people
have complained about the simplicity and lack of creativity and continue to do so. My
goal was to come up with this href="http://gameovercancer.ca/tests/brandgenerator/"
rel="noreferrer">website as a joke. Type in 'Halifax' and
you will see what I mean.

itemprop="text">

class="normal">Answer

src="https://i.stack.imgur.com/Glo2Q.png" alt="enter image description here"> Feel
free to fork and
improve.

/>

• 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

src="https://i.stack.imgur.com/ZYic1.png" alt="Half Style on
text">

Demo:
rel="noreferrer">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.

---

class="snippet" data-lang="js" data-hide="false" data-console="true"
data-babel="false">

class="snippet-code-js lang-js prettyprint-override">// 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 < chars.length; i++) {
//
Create a styled element for each character and append to container
output +=
'' +
chars[i] + '';
}

// Write to DOM only
once
$el.append(output);


});
});

.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;
}

            src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

Single
            Characters:
            data-content="X">X
            data-content="Y">Y
            data-content="Z">Z
            data-content="A">A



Automated:

            class="textToHalfStyle">Half-style,
            please.

( href="http://jsfiddle.net/arbel/pd9yB/1695/" rel="noreferrer">JSFiddle
demo)

/>

src="https://i.stack.imgur.com/zYa0F.png" alt="Half Style on text - advanced - With Text
Shadow">

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

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

data-hide="true" data-console="true" data-babel="false">
class="snippet-code snippet-currently-hidden">
class="snippet-code-js lang-js prettyprint-override">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 < chars.length; i++) {
// Create a styled element for each character and
append to container

output += ' class="halfStyle" data-content="' + chars[i] + '">' + chars[i] +
'';
}

// Write to DOM only once

$el.append(output);

});
});

.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
            */
}

            src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
Single
            Characters:
            data-content="X">X
            data-content="Y">Y
            data-content="Z">Z
            data-content="A">A



Automated:

            class="textToHalfStyle">Half-style,
            please.