Feature Request: Before and After Pseudo-Elements with Content

[rbrisita]

I am using Tailwind CSS for the first time and I am liking the experience so far. I came onto a situation that is not covered: the use of pseudo-elements, in this case before and after. A simple example could be:

CSS

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

.pe-a::after {
  content:attr(data-pe-a);
}

HTML

<p class="pe-b pe-a" data-pe-b="♥" data-pe-a="♥">Tailwind CSS</p>

[silentarrowz]

Yeah. I'd also like to know how to use this in tailwind

[IRediTOTO]

Me too :D Is there a 3rd npm pack for this ?

[pedegago]

Yes, there is https://openbase.com/js/tailwindcss-pseudo/documentation.
But actually I would prefer this feature be a built-in part of tailwindcss

[michael-andreuzza]

I am in too.

[davidwebca]

I found this discussion looking to see if there was any plan about adding it in core, but it's already a tailwind plugin that you can find here. https://github.com/croutonn/tailwindcss-pseudo-elements

I'd still love if it wasn't a plugin and to see that in core... mostly about peace of mind when comes around time to upgrade tailwind and such. I use pseudo elements in every single one of my projects and it's now become the first thing that makes me write an actual stylesheet whereas tailwind generates so many useful classes already that I usually wouldn't even need to. 😂

[sarahdayan]

You can do this with custom variants.

module.exports = {
  // ...
  plugins: [
    plugin(({ addVariant, e }) => {
      addVariant('before', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`before${separator}${className}`)}::before`;
        });
      });
      addVariant('after', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`after${separator}${className}`)}::after`;
        });
      });
    }),
    plugin(({ addUtilities }) => {
      const contentUtilities = {
        '.content': {
          content: 'attr(data-content)',
        },
        '.content-before': {
          content: 'attr(data-before)',
        },
        '.content-after': {
          content: 'attr(data-after)',
        },
      };

      addUtilities(contentUtilities, ['before', 'after']);
    }),
  ],
};

Then, use like this:

<p data-content="💙" class="before:content after:content">
 <!-- -->
</p>

<p data-before="💙" data-after="💛" class="before:content-before after:content-after">
 <!-- -->
</p>

[davidwebca]

Since it's adding a variant, it would be usable as any other variant, granted that you added it to your variant configurations. Ex.:

<div data-content="This has a blue background, white text and covers it's parent width and height."  class="before:bg-blue-500 before:text-white before:absolute before:inset-0 before:text-center before:flex before:items-center before:justify-center"></div>

Note: hypothetical code, not tested.

[arranrp]

@davidwebca sorry I'm a little lost, whats inside the data-content="" gets rendered in the same way the following code does

p::before {
content: "text";
}

but if you wanted

q::before {
content: "text";
color: blue;
}

How would you go about that

[davidwebca]

Adding the css class "before:text-blue" is how to do it. You can read about how variants work and what they do, but basically this code we're talkinga bout just adds variants for all the different existing Tailwind css classes, provided that you add that variant to your configuration. (variants create extra css classes around other utilities like text-center gets a variant "before:text-center" which in turn allows you to center the text in the ::before pseudo element) https://tailwindcss.com/docs/configuring-variants

[kaylumah]

Does someone use this with an icon pack? For example fontawesome duotone, would like to add an icon on hover to any h2-h6 element, and not sure how to approach it.

Doing something like this now (which works, but not sure way to go)

* {
  --fa-secondary-opacity: 1.0;
  --fa-primary-color: #4cae50;
  --fa-secondary-color: #55557b;
}

h2 a::before {
  position: absolute;
  display: none;
  padding-left:2px;
  font-weight: 900;
  content: "\f292";
  font-family: "Font Awesome 5 Duotone";
}

h2 a svg {
  margin-left: -2rem;
}

[davidwebca]

I'm not sure if passing "\f292" in data-content="\f292", as in Sarah's code, would work since it's a CSS ISO character, but you could definitely try. Otherwise you'd have to find which character it resolves to and simply pass that in plain text in the data-content. The rest is simply adding variant classes like explained before.

[adamwathan]

Personal recommendation is to use real elements, not pseudo elements. Aside from bullets in the typography plugin, I haven’t used a pseudo element since initially creating Tailwind. Haven’t run into a single situation where I couldn’t just use a real element with “aria-hidden” and use regular Tailwind utilities to style it.

[davidwebca]

I followed this conversation with great interest, trying to weigh what decision I would make if I was Adam and I agree that most of the time I could have used real elements, but Sarah makes a great point for decorative elements, text selection and search engines.

One could also argue that one could use "user-select:none;" to prevent selection of decorative elements, but it also leaves an undesired result for SEO. One would say "hide them from seo" but, as far as I know, all the weird methods to hide text from search engines that existed before are now discouraged, hacky and against terms of service. Also, going that route would lead to html comments or attributes bloating no-robots="true" or <!-- googleoff: index --> (the only exception I could find on Google's part is that they still support "data-nosnippet" to avoid some text from showing up in their result's text snippets).

In the end, I think I would lean to having it built in because it opens the possibility for people who would actually really need it, but having a good long comment in the docs, and maybe even a link to this thread, about using html elements when you can.

[sarahdayan]

This is such a specific use case that I believe it to make most sense in user land and avoid "fattening" the core of Tailwind, personally.

This thread does a good job of describing how to make it work if you need it.

[paulm17]

@adamwathan Really love tailwinds and the jit addition is a game-changer. I do have a couple of instances where :before and :after pseudo elements are required. For example, I have dial in a component and :after draws out the angle. Would love to see pseudo elements in future releases.

[MichaelAllenWarner]

Here's a situation where a pseudo-element may be necessary (because of a bug in Safari, I think):

https://codepen.io/newcitymike/pen/VwPBdVL

[denik1981]

Positioning background images is definitely a place on where I would use pseudo. It is still one of the weaks point about css in terms how to maintain responsivness when we also want to maint the image in the write position. Not a easy task without pseudo.

[jshimkoski]

I created a plug-in for this that takes advantage of the new JIT mode. (You can write custom content for the pseudo elements and the variants work beautifully with whatever styling you'd need)

https://www.npmjs.com/package/@shimyshack/tailwindcss-pseudo-element-plugin

[paulm17]

Want to follow up with this. I needed before and after pseudo elements and recently upgraded to jit. This plugin solves that issue completely. Many thanks to @jshimkoski for creating it!

[Dataxelio]

I just discover this conversation and it's very interesting.
I have another use case for pseudo element "before".
It's for implementing arrow for my popperjs tooltip as described here : https://popper.js.org/docs/v2/tutorial/#arrow.
As you can see on the link, it's clearly mentionned that

The ::before pseudo-element is required because Popper uses transform to position the arrow inside the popper, but we want to use our own transform to rotate the arrow box into a diamond

My goal is to implement it exclusively with tailwind and I'm using react.
@adamwathan Do you think that there is an alternative other than using pseudo ::before ?
Any suggestion are welcome.
PS : I'm not a css expert :)

[Audreymlgm]

I'm in the same case ! I try to implement the arrow of the popper library in tailwind css but I didn't succeed for the moment. Any suggestion are welcome !

[davidwebca]

Instead of using a pseudo selector, you can simply add a span inside the div and apply the exact same styles. Despite what the library says, it's not required. What they should say is that a parent and child element are required, wether they're a pseudo or not. They use a pseudo element only because it seemed like a simpler solution.

Here's a codepen showing it working. https://codepen.io/davidwebca/pen/jOyRVzQ

There's a few styles that still need to be part of the css stylesheet because of the data-attributes used to target where the arrow is placed, but nothing major.

[roloep85]

What if sometimes your click events does not like elements inside of them?

[PavelDemyanenko]

In React I just combine Styled Components with Twin Macro. Having in the end something like this:

export const SignStyled = styled.span<{ operationType?: string; }>`
  &::before {
    content: ${(props) => props.operationType};
    ${tw`text-3xl pr-2`}
  }
`;

[simonswiss]

👀 https://twitter.com/adamwathan/status/1397281487779729413