Learn Pseudo-elements with Tailwind CSS

In this article, we'll Learn Pseudo-elements with Tailwind CSS. CSS pseudo-elements are powerful features that allow you to style specific parts of an element or create virtual elements that don't exist in your HTML markup. They provide an elegant way to add decorative elements, create special effects, and enhance your UI without cluttering your HTML structure.

What Are Pseudo-elements?

Pseudo-elements are defined using double colons (::) in modern CSS, although single colons (:) also work for backward compatibility. The most commonly used pseudo-elements include:

• ::before and ::after - Create virtual elements before or after the content
• ::first-line - Styles the first line of text
• ::first-letter - Styles the first letter of text
• ::selection - Styles text selected by the user
• ::placeholder - Styles placeholder text in form inputs

The most versatile and widely used are ::before and ::after, which we'll focus on in this post.

Key Points About Pseudo-elements

1. They require the content property (even if it's empty: content: '')
2. They're treated like child elements of the selected element
3. They can be styled and animated just like regular elements
4. They don't appear in the DOM and can't be selected with JavaScript directly
5. They're perfect for decorative elements that don't belong in your HTML

Implementing Pseudo-elements with Tailwind CSS

Tailwind offers utility classes for pseudo-elements. To use pseudo-elements with Tailwind, we use before: and after: prefixes for utilities we want to apply to these pseudo-elements.

Let's explore some practical examples!

<p
className="before:content-['[BEFORE]_'] before:text-red-500 after:content-['_[AFTER]'] after:text-blue-500">
This is the main content
</p>

This is the main content

• The underscore(_) in the code creates a space

Even though the pseudo-element doesn’t need text, the content property is mandatory. If you don’t define it, the pseudo-element won’t appear at all.

When the content property is empty (content: "" or content-[''] in Tailwind), the pseudo-element still exists but has no visible text. However, for it to be seen, you need to set its dimensions (width, height) and possibly a background-color or border.

Steps

1️⃣ Add the Required content Property:

Tailwind provides content-[""] to ensure the pseudo-element is created.

2️⃣ Define Width, Height, and Background:

For example use w-12, h-12, and bg-red-500 to make it visible.

3️⃣ Apply absolute Positioning:

Absolute moves the pseudo-element into a new stacking context, making it visible.

4️⃣ Set Parent relative:

Add relative to the parent element so that the pseudo-element positions itself relative to the parent.

Why Does absolute Make an Empty Pseudo-Element Visible?

1. By default, a pseudo-element (::before or ::after) has no dimensions—so it won’t be visible even if you add bg-* or border-*.
2. Setting absolute removes it from the document flow, allowing you to place it anywhere.
3. It needs a relative parent (h1 in this case) so it positions relative to that instead of the whole document.
4. Without absolute, its size would be 0px and it wouldn't show up—even if it has a background color.

Making the Invisible, Visible

Let's take an h1 heading and add a decorative underline using ::after. By default, this pseudo-element has no size, no position, and won’t appear at all. But the moment we give it positioning and dimensions, it becomes a real element—just like magic.

<h1 class="relative text-4xl font-bold text-gray-900 after:content-[''] after:absolute after:-bottom-2 after:left-0 after:w-full after:h-1 after:bg-blue-500">
  Tailwind Makes Pseudo-Elements Easy
</h1>

Tailwind Makes Pseudo-Elements Easy

Breaking It Down:

• relative on h1 → This ensures that our ::after element positions relative to it.
• after:content-[''] → This makes the pseudo-element actually exist.
• after:absolute → Now it’s free from the document flow and can be positioned precisely.
• after:-bottom-2 after:left-0 → Positions it just below the text.
• after:w-full after:h-1 → Gives it full width and a height of 1px, making it a nice underline.
• after:bg-blue-500 → Makes the underline pop with a nice blue color.

Pushing It Further: Unlimited Creativity!

Now that the pseudo-element behaves like a real element, the sky’s the limit. Want to create a fancy underline that expands on hover? Just add a transition!

<h1 class="relative text-4xl font-bold text-gray-900 after:content-[''] after:absolute after:-bottom-2 after:left-0 after:w-0 after:h-1 after:bg-blue-500 after:transition-all after:duration-500 hover:after:w-full">
  Hover Over Me to See the Magic!
</h1>

Hover Over Me to See the Magic!

What’s Happening?

• The underline starts with w-0 (invisible).
• On hover, it smoothly expands to w-full.
• The transition-all and duration-500 make it feel buttery smooth.

Since pseudo-elements like ::before and ::after behave like real elements once they have content, position, and size, you can style them with anything—gradients, border-radius, hover effects, transitions, animations, and more!

 
<h1 class="relative text-4xl font-bold text-gray-900 after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-0 after:h-1 after:rounded-full after:bg-gradient-to-r after:from-blue-500 after:to-purple-500 after:transition-all after:duration-500 hover:after:w-full hover:after:shadow-lg">
  Hover Over Me for a Glow Effect!
</h1>

Hover Over Me for a Glow Effect!

Before vs After

When using absolute positioning, both ::before and ::after pseudo-elements behave similarly as they're both removed from the normal document flow. Let's explore this with examples.

Single Decoration Element:

Consider a heading with a single decorative circle. We can create this using either ::before or ::after:

<!-- Using ::before -->
<h1 class="relative mx-10 my-8 text-center text-2xl font-bold
  before:content-[''] before:absolute before:-left-4 md:before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-8 before:h-8 before:bg-blue-500 before:rounded-full">
  Centered Text with Circle
</h1>
 
<!-- Using ::after (produces identical result) -->
<h1 class="relative mx-10 my-8 text-center text-2xl font-bold
  after:content-[''] after:absolute after:-left-4 md:after:left-0 after:top-1/2 after:-translate-y-1/2 after:w-8 after:h-8 after:bg-blue-500 after:rounded-full">
  Centered Text with Circle
</h1>

Centered Text with Circle

Centered Text with Circle

With absolute positioning, these two examples produce identical visual results. When you only need one additional decorative element, you can use either ::before or ::after interchangeably.

But what if we need two additional elements?

This is where the true power of having both pseudo-elements comes into play:

<h1 class="relative mx-16 my-8 text-center text-2xl font-bold
  before:content-[''] before:absolute before:-left-8 md:before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-8 before:h-8 before:bg-blue-500 before:rounded-full
  after:content-[''] after:absolute after:-right-8 md:after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-8 after:h-8 after:bg-red-500 after:rounded-full">
  Text Between Two Circles
</h1>

Text Between Two Circles

In this example, we've created a heading with:

• The text content in the center
• A red circle positioned to the left (using ::before)
• A blue circle positioned to the right (using ::after)

If you were to swap the ::before and ::after properties (moving the red styling to ::after and the blue styling to ::before), the visual result would be identical because both are absolutely positioned.

The key takeaway: When using absolute positioning, ::before and ::after behave the same way, giving you two independent "virtual elements" to work with. For a single decorative element, either will work. When you need two additional elements without adding extra HTML markup, you can leverage both pseudo-elements together.

And just like that, you’ve unlocked CSS superpowers. With ::before and ::after, your creativity is unlimited. Tailwind makes it so easy that once you get the hang of it, you’ll never look back! 🎨✨

More examples of Pseudo-elements

Example 1: Button with Icon

A common UI pattern is adding icons to buttons. Let's create a button with a right arrow icon that animates on hover.

• Without Pseudo-Element:

<button
  className="
        relative inline-flex items-center px-9 py-9 bg-blue-500 text-white font-bold
        rounded hover:bg-blue-600 transition-all group"
>
  <span>Click Me</span>
  <span
    className="absolute right-4 transition-transform duration-300 group-hover:translate-x-1"
  >
    →
  </span>
</button>

• The arrow sign (→) is positioned absolutely relative to its nearest positioned ancestor, which in this case is the <button> element.

What Happens When You Remove relative and absolute?

• If you remove relative from the <button> and absolute from the arrow <span>, it will still work
• Since the button is inline-flex, both <span>Click Me</span> and <span>→</span> will now be treated as flex items inside the button

Why Use absolute?

If you want the arrow to not affect the button width and height , absolute keeps it separate

• With pseudo-elements:

With pseudo-elements, we can do this without extra HTML tags:

<button
  className="
        relative inline-block px-6 py-3 bg-blue-500 text-white font-bold
        rounded pr-10 hover:bg-blue-600 transition-all before:content-['→'] 
        before:absolute before:right-5 before:top-1/2 before:-translate-y-1/2 
        before:transition-transform before:duration-300 hover:before:translate-x-1"
>
  Click Me
</button>

Try hovering over the button to see the animation!

With pseudo-elements (::before), we can insert the arrow (→) without adding extra HTML tags. The before:absolute property ensures it is positioned inside the button, while hover:before:translate-x-1 moves it slightly on hover.

Example 2: Tooltip with Pseudo-elements

Creating tooltips is a great use case for pseudo-elements. We can use after: for the tooltip content and before: for the little arrow:

<div
  className="   
    relative inline-block px-4 py-2 bg-gray-800 text-white rounded cursor-pointer
    after:content-['This_is_a_tooltip!'] after:absolute after:-bottom-10 after:left-1/2 
    after:-translate-x-1/2 after:bg-gray-600 after:text-white after:py-2 after:px-3 after:rounded
    after:text-sm after:opacity-0 after:transition-opacity after:duration-300 after:whitespace-nowrap
    hover:after:opacity-100 before:content-[''] before:absolute before:-bottom-2.5 before:left-1/2 
    before:-translate-x-1/2 before:border-[10px] before:border-solid before:border-transparent 
    before:border-t-gray-600 before:opacity-0 before:transition-opacity before:duration-300 
    hover:before:opacity-100 group
    "
>
  Hover over me
</div>

Hover over the text to see the tooltip appear!

Example 3: Decorative Divider

Create an elegant section divider with centered text using pseudo-elements:

<div
  className="
    relative text-center my-10
    before:content-[''] before:absolute before:w-1/3 before:h-px
    before:bg-gray-300 before:left-0 before:top-1/2
    after:content-[''] after:absolute after:w-1/3 after:h-px
    after:bg-gray-300 after:right-0 after:top-1/2
"
>
  <span className="px-4 bg-white text-gray-500 relative z-10">OR</span>
</div>

This creates a horizontal line with text in the middle:

Example 4: Card with Corner Accents

Create a card with decorative corner accents using pseudo-elements:

<div
  className="
    relative p-8 bg-white shadow-lg rounded-md 
    before:content-[''] before:absolute before:w-6 before:h-6
    before:border-t-2 before:border-l-2 before:border-blue-500
    before:top-4 before:left-4
    after:content-[''] after:absolute after:w-6 after:h-6
    after:border-b-2 after:border-r-2 after:border-blue-500
    after:bottom-4 after:right-4
"
>
  <h3 className="text-xl font-bold mb-2">Featured Content</h3>
  <div>
    This card has decorative corners created with pseudo-elements, without
    adding any extra markup to your HTML.
  </div>
</div>

The card has elegant corner accents that add visual interest:

Example 5: First Letter Styling

For a magazine-style layout, you can style the first letter of paragraphs:

<div
  className="
    first-letter:text-5xl first-letter:font-bold first-letter:text-blue-500
    first-letter:float-left first-letter:mr-2 first-letter:mt-1
    text-gray-700 leading-relaxed
"
>
  Typography is a powerful tool in web design. When used effectively, it can
  transform the reading experience and add personality to your content. This
  paragraph has a stylized first letter that creates visual interest without
  requiring additional HTML elements. It's a great way to add polish to your
  text content with minimal effort.
</div>

Notice how the first letter is styled differently:

Example 6: Animation with Pseudo-elements

Create a "loading" animation using pseudo-elements:

<button
  disabled
  className="
    relative inline-flex items-center px-8 py-3 bg-gray-200 text-gray-500
    rounded font-bold cursor-not-allowed
    before:content-[''] before:absolute before:w-5 before:h-5
    before:rounded-full before:border-2 before:border-gray-300
    before:border-t-gray-500 before:animate-spin before:left-2
    
"
>
  Loading...
</button>

The button shows a spinning loader animation:

Conclusion

CSS pseudo-elements are an incredibly versatile tool for web developers. When combined with Tailwind CSS, they become even more powerful by allowing you to create complex designs and interactions with minimal HTML. The examples in this article demonstrate just a small fraction of what's possible.

Remember these key points when working with pseudo-elements in Tailwind:

1. Use the before: and after: prefixes for styling pseudo-elements
2. Always include content property (use before:content-[''] for empty content)
3. Position them using before:absolute and related utilities
4. Take advantage of transitions and animations for interactive effects
5. Use them for decorative elements rather than content that should be accessible

By mastering pseudo-elements, you'll be able to create more elegant, maintainable code while achieving sophisticated visual effects that would otherwise require additional markup.

Happy coding!