Highlights contains two pseudo-elements (`::before` and `::after`) with
text for assistive technologies. Because these elements have dimensions,
on RTL languages a highlight near the right border of the document,
makes the `::after` pseudo-element to overflow the page to the right.

Based on similar classes from other popular CSS frameworks, I made these
pseudo-elements to have
1 x 1px dimensions. This does not affect negatively the screen readers.

Example:

- Bootstrap: https://github.com/twbs/bootstrap/blob/c2f67d72e8010307f657b2a55ae93fc5c9cab2a5/scss/mixins/_visually-hidden.scss#L9-L17

- Foundation: https://github.com/foundation/foundation-sites/blob/258d9eb3432d7e497f41b4554f4116d5c59c92a8/scss/util/_mixins.scss#L217-L224

Closes #2811