Pseudo-elements

This skill reviews CSS pseudo-elements and the View Transitions API. It prefers a pseudo-element over an extra node when the layer is decorative.

Every check is a pair. The broken line sits beside the line that replaces it.

content: "" is required or ::before and ::after do not render. That is exact. A second DOM node used only as a wash or a hit pad is a finding when a pseudo-element can do it. Minimum target size belongs to laws-of-ux. Shadow animation via a pseudo-element belongs to visual-design. Component exit mounting belongs to exit-animations.

When to use

Use this when styling hover layers, hit areas, placeholders, selections, dialog backdrops or a shared-element page change. Use exit-animations for a Motion tree that mounts and unmounts in place.

1. Read the decorative layers

Read the files in scope. List ::before, ::after, ::backdrop, ::placeholder, ::selection, ::marker, ::first-line and any view-transition-name or startViewTransition call.

2. Check generated boxes

::before and ::after set content, usually "". That is pseudo-content-required. Decorative washes, underlines and hit pads use a pseudo-element instead of an empty span. That is pseudo-over-dom-node. An absolute pseudo-element has a position: relative parent. That is pseudo-position-relative-parent. If the pseudo covers the text, put the text above it, typically with z-index: -1 on the pseudo. That is pseudo-z-index-layering.