A smaller solution might be to only set `font-size: 0` and then reset the `font-size: 2.14286rem` on the `:before`. Removes the need for all this negative margin stuff. Although, I'm not sure if that is accessible.

The problem is the abbreviation text becomes visible again when the page content is selected (because of selection CSS).