paazmaya.fi

The Website of Juga Paazmaya | Stories about web development, hardware prototyping, and education

Fixing semantics for CSS pseudo element selectors

Upgrade your CSS style with pseudo element selectors and ensure cross-browser compatibility, skipping IE8 support.

Pseudo elements and pseudo selectors in CSS can be differentiated by using varying numbers of : (colons), as indicated in the related CSS3 specification module.

Regular expression for identifying potential single colon usages, like :after and :before:

([^:])(:{1})(\bafter|before\b)

Replace with these three matched values, inserting an additional colon:

$1: $2$3;

The regular expression could be extended by adding all the pseudo elements defined in the specification, such as ::first-line and ::first-letter.

Essentially making this change will drop support for IE8, as can be seen via the browser support table at the Mozilla Developer site.

More about regular expressions, learn in 55 minutes.