Pseudo Elements

Learn how to style pseudo-elements in Yumma CSS.

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

Before

It makes a pseudo-element that's 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 b::p-a b::i-0 b::bg-indigo/10 p-8">
  Styled content
</div>

It makes a pseudo-element that's 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">
  Content with styled after element
</div>

It applies styles to highlighted text.

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

Select this text to see custom selection colors!

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

This is the placeholder text for an input or textarea element.

Try focusing on the input to see the placeholder styling.

<input class="p::c-silver bw-1 bc-silver p-3 w-full" 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