Tailwind Pseudo Elements

Browsers create hidden pieces inside many elements: the first letter of a paragraph, the dot in front of a list item, the grey text inside an empty input. Pseudo elements and pseudo classes let CSS style those pieces. Tailwind offers a variant for each one, so no custom stylesheet is required.

Before and After

The before: and after: variants insert a decorative piece in front of or behind the content of an element. Always add a content class, because a pseudo element does not render without content. An empty string works for pure decoration.

<label class="after:ml-1 after:text-red-500 after:content-['*']">
  Email
</label>

Result:  Email*   (red star added by CSS, not by HTML)

Use the underscore to represent a space inside arbitrary content, such as after:content-['_→'].

Decorative Underline Example

<h4 class="relative inline-block before:absolute before:-bottom-1 before:left-0 before:h-1 before:w-full before:bg-sky-400 before:content-['']">
  Featured
</h4>

 Featured
 ▔▔▔▔▔▔▔▔  sky blue bar under the word

Position Based Variants

These variants select elements by their place among siblings. They remove the need to add extra classes to individual list items.

Variant           Selects
─────────────────────────────────────────
first:            the first child
last:             the last child
odd:              items 1, 3, 5, ...
even:             items 2, 4, 6, ...
only:             a child with no siblings
first-of-type:    first element of its tag
nth-3:            exactly the third child
empty:            an element with no content

Striped Table Rows

<tr class="odd:bg-white even:bg-gray-50">...</tr>

Row 1   white
Row 2   light gray
Row 3   white
Row 4   light gray

Lists With Dividers

Give every item a bottom border and remove the border on the last one. The list ends cleanly without a stray line.

<li class="border-b py-2 last:border-b-0">Item</li>

 Item one
 ────────────
 Item two
 ────────────
 Item three     ← no line below

Styling the Child Elements From the Parent

The star variant applies a rule to every direct child. It saves repeated classes.

<ul class="*:rounded *:bg-gray-100 *:p-2 space-y-2">
  <li>One</li>
  <li>Two</li>
</ul>

Form and Text Variants

Variant            Styles
──────────────────────────────────────────────
placeholder:       placeholder text in inputs
file:              the button inside file inputs
selection:         text highlighted by the mouse
marker:            bullets and numbers in lists
first-letter:      the first character of a block
first-line:        the first line of a block
required:          inputs marked required
disabled:          disabled controls
open:              details element in open state

Styled File Upload Button

<input type="file" class="text-sm file:mr-4 file:rounded-full file:border-0 file:bg-sky-600 file:px-4 file:py-2 file:text-white hover:file:bg-sky-700">

The native upload button usually resists styling. The file: variant gives full control in one line.

Drop Cap and Highlight Examples

<p class="first-letter:float-left first-letter:mr-2 first-letter:text-5xl first-letter:font-bold">
  Magazine style paragraph...
</p>

<p class="selection:bg-yellow-200 selection:text-black">
  Select this text to see a yellow highlight.
</p>

What a Pseudo Element Means in Plain Words

Imagine a printed book. The page number at the bottom, the large first letter of a chapter, and the bullet marks in a list all appear on the page, yet the author never typed them as normal sentences. The printer adds them by rule. CSS works the same way. The browser creates those extra pieces from rules and lets you style them. A pseudo element is a piece the browser builds. A pseudo class is a state or position of a real element, such as the first item in a list.

Why These Variants Save Time

Without them, you must add a custom class to the last list item, another to every second table row, and a third to every required field. Editing the content later means updating those classes by hand. Position variants make the rules follow the structure automatically. A new row added at the end of a table joins the stripe pattern without any change to its classes. A new item at the end of a list takes over the no-border rule from the old last item.

Combining Variants

Variants stack from left to right, and each one adds a condition. The class odd:hover:bg-sky-50 colors an odd row when the mouse sits on it. The class md:first:pt-0 removes top padding from the first item on medium screens and up. Read the class aloud as a sentence, and the meaning becomes clear.

md:odd:hover:bg-sky-50

 md      →  on medium screens and wider
 odd     →  for odd items
 hover   →  while the mouse is over the item
 bg-sky-50 → apply a very light blue background

Common Mistakes

Beginners forget the content class on before: and after: rules and see nothing on the page. Another frequent error places text meant for readers inside a pseudo element. Search engines and assistive tools may skip that text, so keep meaningful words in the HTML. A third mistake applies last: to the wrong element. The variant belongs on the child items, not on the parent list.

Usage Advice

• Reserve before: and after: for decoration. Important text belongs in the HTML so screen readers and search engines can read it.
• Combine position variants with state variants, such as odd:hover:bg-sky-50.
• Prefer these variants over extra classes on every list item, which keeps markup short.

Pseudo variants reveal how much styling power hides inside ordinary HTML. A handful of them handle dividers, stripes, markers, and decorations for an entire site.