Pseudo Elements

Reference for styling specific parts of elements.

Pseudo-element variants allow you to style ::before, ::after, ::selection, and ::placeholder elements using simple prefixes.

Before

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

Pseudo Elements require content to be visible. Make sure to set content via CSS or inline styles when using ::before.

<div class="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.

Like ::before, the ::after pseudo-element requires content to be visible.

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

Selection

Applies styles to highlighted/selected text.

Try selecting the text below to see the custom selection styling.

Select this text to see custom selection colors!

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

Placeholder

Styles the placeholder text for input or textarea elements.

Try focusing on the input to see the placeholder styling.

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

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

| Pseudo-element | Prefix | Description | | --------------- | ------ | ----------------------------------------------- | | ::after | a::* | Styles the last child pseudo-element | | ::before | b::* | Styles the first child pseudo-element | | ::selection | s::* | Styles the portion of text that is selected | | ::placeholder | p::* | Styles placeholder text in inputs and textareas |