Before & After

Add content with before: and after: pseudo-elements

Use before: and after: modifiers to add pseudo-element content and decorations without extra HTML.

Add decorative content before an element. The content property sets what is displayed.

#Section Title

Email*

before:content-['#']after:content-['*']

Tailwind CSS

<h2 class="before:content-['#']
  before:text-orange-400
  before:mr-2
  before:font-bold">
  Section Title
</h2>

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

28 / 35