#pseudo-element CSS effects

6 free, pure-CSS effects match the "pseudo-element" tag. Each is copy-ready and needs no library or build step.

Each header label is prefixed by a small icon drawn purely from borders and shadows.

Pass, fail and pending markers are drawn in pure CSS beside each label.

The real progress element restyled with separate WebKit and Gecko pseudo element rules.

Two native meter elements styled as lapis capsules through their vendor pseudo elements.

A comparison matrix where support is drawn as a css tick and a css cross, no glyph font.

A CSS counter prints zero padded row numbers without any markup duplication.

Popular tags