Pseudo Elements

Before

Creates a pseudo-element that is the first child of the selected element.

<div className="p:r p:8 b::p:a b::i:0 b::bg:indigo/10">Styled content</div>

After

Creates a pseudo-element that is the last child of the selected element.

<div className="p:r a::p:a a::c:indigo">Styled content</div>

Selection

Applies styles to highlighted/selected text.

<p className="… s::bg:indigo">
  Select this text to see custom selection colors!
</p>

Placeholder

Styles the placeholder text for input or textarea elements.

<input className="… p::c:silver" placeholder="Enter your email…" />

Here's a reference for all the pseudo-element variants available in Yumma CSS: