Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/tailwindlabs/tailwindcss/discussions/2119 below:

Before and After Pseudo-Elements with Content · tailwindlabs/tailwindcss · Discussion #2119 · GitHub

• Pricing

Aug 4, 2020 · 10 comments · 26 replies

-

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>

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

• 👍 56
• ❤️ 19
• 🚀 14

-

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

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

0 replies

-

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

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

1 reply

-

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

0 replies

-

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. 😂

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

0 replies

-

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>

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

• 👍 55
• 🎉 4
• ❤️ 1
• 🚀 20

10 replies

-

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.

Beta Was this translation helpful? Give feedback.

-

@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

Beta Was this translation helpful? Give feedback.

-

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

Beta Was this translation helpful? Give feedback.

-

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;
}

Beta Was this translation helpful? Give feedback.

-

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.

Beta Was this translation helpful? Give feedback.

-

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.

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

• 👍 9
• 👎 25
• 😕 6
• ❤️ 6
• 👀 5

11 replies

-

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.

Beta Was this translation helpful? Give feedback.

-

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.

Beta Was this translation helpful? Give feedback.

-

@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.

Beta Was this translation helpful? Give feedback.

-

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.

Beta Was this translation helpful? Give feedback.

-

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

1 reply

-

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!

Beta Was this translation helpful? Give feedback.

-

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 :)

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

3 replies

-

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 !

Beta Was this translation helpful? Give feedback.

-

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.

Beta Was this translation helpful? Give feedback.

-

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

Beta Was this translation helpful? Give feedback.

-

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`}
  }
`;

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

0 replies

-

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

0 replies

Heading

Bold

Italic

Quote

Code

Link

Numbered list

Unordered list

Task list

Attach files

Mention

Reference

You can’t perform that action at this time.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4