Pseudo-Element Variants

Style generated and special pseudo-elements with variant prefixes instead of writing separate CSS rules.

4 min read Level 2/5 #tailwind#variants#pseudo

What you'll learn

Create decorative layers with before and after
Style placeholder, selection, and marker pseudo-elements
Style file inputs and the dialog backdrop

Pseudo-elements like ::before and ::placeholder are styled with their own variant prefixes. The before: and after: variants even insert an empty content automatically when you use a content-* utility.

before and after

These create generated boxes you can position and decorate. You must give them content, even if it is empty:

<div class="relative">
  <span class="before:content-[''] before:absolute before:inset-0
               before:bg-gradient-to-r before:from-blue-500/20">
    Overlaid text
  </span>
</div>

before:content-[''] plus before:absolute before:inset-0 produces a full-bleed decorative layer behind or above its host — useful for gradients, ribbons, and required-field markers.

Form and Text Pseudo-Elements

These variants reach parts of native UI you otherwise cannot touch:

<input class="placeholder:text-gray-400 placeholder:italic" placeholder="Search">

<p class="selection:bg-yellow-200 selection:text-black">
  Try selecting this sentence.
</p>

<ul class="list-disc marker:text-blue-500">
  <li>Marker is recolored</li>
</ul>

placeholder: styles input placeholder text, selection: styles the user’s highlighted text, and marker: styles list bullets and numbers.

File Inputs and Dialog Backdrops

The file: variant targets the button portion of a file input, and backdrop: styles the overlay behind a native dialog:

<input type="file" class="file:mr-4 file:rounded-full
       file:border-0 file:bg-blue-50 file:px-4 file:py-2
       file:text-blue-700">

<dialog class="backdrop:bg-black/50 rounded-xl p-6">
  Modal body
</dialog>

These let you fully restyle the file picker button and dim the page behind a dialog element with zero JavaScript.

Group & Peer →