Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created:
HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.
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.
Uses CSS’ ::before and ::after to repeat the characters seen on screen. The key part – where the character is passed from the HTML to CSS – uses a data-* HTML attribute along with content: attr(data-nameoftheattribute); in CSS. Finally, some more CSS is used to only show half/a third of the orginal and overlaid characters.
The repository also ships with a jQuery plugin to automate the effect
HalfStyle: Style Half of a Character by CSS →
HalfStyle Demo (also embedded above) →