Blog Post

Voiding the Pseudo

The Zombie: Using pseudo elements on a void tag

Always a Zombie? Yes

Severity: medium – never works, but won’t break things

Why is it a Zombie: pseudo elements (::before and ::after) are slotted in after the opening tag and before the closing tag. Without those tags the pseudo-element cannot be slotted in.

Cure the Zombie by: 1. If possible change the element to one with opening and closing tags. 2. If you cannot change the element wrap it in a div or span (or label for an input) and create the pseudo elements on that.