Tailwind CSS pseudo-elements

A Tailwind CSS plugin to add ::before and ::after pseudo-element variants.

Install

yarn add tailwind-pseudo-elements
# or
npm install tailwind-pseudo-elements

Add to tailwind.config.js

Add the plugin to the plugins section of your tailwind.config.js file.

// tailwind.config.js

module.exports = {
  plugins: [require('tailwind-pseudo-elements')],
}

Enable the variants

Tailwind has a couple of different ways to configure your variants, but I would recommend appending the before and after variants to the defaults like so:

// tailwind.config.js

module.exports = {
  variants: {
    // Defaults are ['responsive', 'hover', 'focus']
    backgroundColor: ({ after }) => after(['before', 'after']),
    // Output: ['responsive', 'hover', 'focus', 'before', 'after']
  },
}

Example

<p
  class="before-inset-0 before:bg-green-500 before:rounded-sm before:opacity-80"
  data-content-before="Check it out: "
>
  Check out this sumptuous green rectangle
</p>

Usage

When you add the before or after variants to a plugin, additional classes with a before: or after: prefix are generated which look like this:

.before\:h-3::before {
  height: 0.75rem;
}

To reduce the boilerplate of creating a pseudo-element there are .before-content and .before-inset-0 helper classes (plus .after-content & .after-inset-0) which look like this:

.before-content::before {
  content: attr(data-content-before);
}

.before-inset-0 {
  position: relative;
}

.before-inset-0::before {
  content: attr(data-content-before);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

There’s also .before-inset-x-0 and .before-inset-y-0 which only set left/right and top/bottom.

You can then modify or override those base styles as needed using before: or after: prefixed classes.

<p class="before-inset-0 before:top-auto before:h-2 before:bg-green-500">
  Wow, how convenient is that?
</p>

The above example creates

Pseudo-element content

The .before-content and .after-content classes both set the pseudo-element’s content to the value of the element’s data-content-before and data-content-after attributes.

This lets you control the content of the pseudo-elements using either HTML or Javascript:

<p class="before-content" data-content-before="You have to check this out: ">
  Amazing deals like you’ve never seen before! At these prices I'm practically
  giving them away! When you see how low our prices are you’ll think I’ve gone
  insane!
</p>