For a single character:

Pure CSS. All you need to do is add the classes .halfStyle [-CustomClassName-] to the element containing the character you want to be half-styled.

For each element containing the character, a data attribute holds the character, for example data-content="X", and the pseudo element uses content:attr(data-content); so the .halfStyle.[-CustomClassName-]:before class will be dynamic and you won't need to hard code it for every instance.

For Any text:

Simply add .textToHalfStyle class and data attribute data-halfstyle="[-CustomClassName-]" to the element containing the text.
The included jQuery snippet will do the rest of the job.

You can also define multiple Half-Style style-sets and tell the plugin which one to use on your desired element.

License

Changelog

Sets the default HalfStyle style-set to 'hs-base' if no 'data-halfstyle' attribute is present on '.textToHalfStyle' instances.

v2.0.1

Fixes a Chrome 59 and above issue - Addresses a Chrome bug where Chrome fails to correctly render and repaint pseudo elements - I came up with this fix after many different tests.

v2.0.0

Customized Half-Styles dynamic support is the major update. The plugin can use a customized Half-Style style-set via data-halfstyle="[-CustomClassName-]" on the target .textToHalfStyle elements. You can define multiple Half-Style style-sets and tell the plugin which one to use.

Prefixed javascript variable names to avoid conflicts with other scripts.

Added multiple demos in demo.html

v1.2.0

Moving DOM write to outside of loop (better performance)

v1.1.0

Replaced DOM ready function with the short version with failsafe $ alias

Initializing vars only once in each scope

Removed unnecessary searches in the DOM ( multiple $('') statements for the same item )

Shortened some code

Now supports more than one element with HalfStyle full text replacement (multiple .textToHalfStyle elements)

v1.0.1

Added support for accessibility, like audio screen readers or brail readers for the blind or visually impaired.