.halfStyle:before includes positioning like: "position:absolute; top: 0; left:0;" which puts the :before element on top of the existing element.

"width: 50%" says it's only half as wide.

The possibly fancy thing being used here is the use of "attr(data-content)" which use the data-content attribute of the element to fill the pseudo-element's content.

that and the use of css attr()

::after would work as well. It just adds something before or after the selected DOM element, in this case, a half-shown copy of the letter on top of the original.