Apply CSS to half of a character

Is there a way to apply CSS to half of a character in a text? Yes, it is possible. Half the letter being transparent and half is visible prominent.

All you need to do is to add a class on the text you want to apply CSS and the rest is taken care of. The accessibility of the main text is preserved with screen readers for the blind or visually impaired.

You need to do the following things for applying CSS to half of a character:

• Methods for styling half of a character or letter
• Methods for styling part of a character with CSS/JavaScript
• Methods for applying CSS to 50% of a character

Just apply the class .halfStyle to each element which contains the character you want to be half-styled.

For example, see the below code.

HTML:

<span class="halfStyle" data-content="A">A</span>
<span class="halfStyle" data-content="B">B</span>
<span class="halfStyle" data-content="C">C</span>
<span class="halfStyle" data-content="D">D</span>

Read Also: HTML5 placeholder color with CSS

CSS:

.halfStyle {
position:relative;
font-size:80px;
display:inline-block;
color: black;
white-space: pre;
overflow:hidden;

}
.halfStyle:before {
display:block;
position:absolute;
z-index:1;
top:0;
left:0;
content: attr(data-content);
width: 50%;
overflow:hidden;
color: blue;
}

For each span element containing the each character, create a data attribute i.e. data-content=”A” etc. and on the pseudo element use content: attr(data-content);

So, the .halfStyle:before class will be more dynamic and you no need to hard code it for each instance.

Note: Every browser calculates the .5em value differently.