Lists & Generated Content

Style list markers and inject decorative generated content with utilities.

4 min read Level 1/5 #tailwind#typography

What you'll learn

Use list-disc, list-decimal, list-none, and list-inside
Style markers with the marker variant
Use content-[''] with before and after

Lists and pseudo-element content are easy to forget because the browser styles them by default. Tailwind gives you precise control when those defaults are not what you want.

List Style and Position

<ul class="list-disc list-inside">
  <li>Bulleted item</li>
</ul>

<ol class="list-decimal list-inside">
  <li>Numbered item</li>
</ol>

<ul class="list-none">
  <li>No marker — typical for nav menus</li>
</ul>

list-inside pulls the marker into the content box so wrapped lines align under the text.

Styling Markers

The marker: variant targets the bullet or number itself:

<ul class="list-disc marker:text-blue-500 marker:font-bold">
  <li>A list with tinted bullets</li>
</ul>

Generated Content

Use before: and after: with content-* for decorative bits. A content-[''] is required for purely visual pseudo-element blocks:

<li class="before:content-['→'] before:mr-2 before:text-emerald-500">
  Custom arrow marker
</li>

<span class="relative after:content-[''] after:absolute after:inset-x-0 after:-bottom-1 after:h-0.5 after:bg-blue-500">
  Underline accent
</span>

The Typography Plugin (prose) →