Do you use CSS ::before and ::after pseudo elements?

I LOVE pseudo elements in CSS. I use ::before and ::after probably more than I should. In fact, I love them so much, that I'm creating a video course for them.

It got me wondering, how many developers are using them in production.

Question

Do you currently use ::before and ::after? If so, what sorts of design patterns do you use them for?

If not, why don't you?

Oh and if you've never used one, I've got a great primer over here.

Comments

[Jacque Schrag]

I use pseudo elements all the time! Like others have said, if I’m creating something that is only for design & not actual content, I try to use pseudo elements.

One of my favorite ways to use them is when I have an element inside of content that has a full width background, but I need the content inside of that element to be the same width as the rest of the content. Rather than using a bunch of wrapper classes, you can use pseudo elements to render the different background color that extends the full width of the screen.

[Bryan Robinson]

Ooooooh, interesting idea! I'd never thought about that.

[Vic Seedoubleyew]

It seems that it would be really easy to use ::before and ::after to apply bad practices.

Personally, I have used it just yesterday to "join" a list of elements with commas, using li:not(:last-child)::after { content: ", "; }

However I am not 100% sure there isn't a better way to do it

[Bryan Robinson]

They definitely can be misused (and their accessibility is a bit ambiguous sometimes).

That join selector isn't the worst thing in the world. My preference would be to add it via the template if at all possible, but we don't always have access to the template. Someone else in the thread mentioned not having WordPress behaving and they used a ::before to do a price label:

ut4utc

Jun 18

Only yesterday I asked a question on stackoverflow for WordPress - how to add to the price of a variable product, left the word Price, and then, not finding the answer, I took it and made it through ::before

div.summary-inner span.price .amount::before {
content: 'Цена: ';
}

Watch result you can at here parketdoska.ua/каталог/acacia/акац...

[Vic Seedoubleyew]

Well I do have access to the template, it's a single page app I am developing, so I could. However I went for the ::before selector for the following reasons:

• it is not content per se, it is just a presentation choice. I could display the list as a bulleted list. I choose to display it inline with commas, so I would file it into display rather than content
• adding that comma through template would add a lot of somewhat complex logic : I would need to iterate on my list while maintaining a boolean to check whether I should add a comma or not, since I should add it before my first element, or vice versa after my last element. I am not even sure the templating engine I am using would enable that

I would love to have feedback though, if anybody thinks it is inappropriate, or there is a more correct way to achieve that

[Bryan Robinson]

I see! Yeah, if your templating engine would make the logic complicated, I totally understand that.

I'm used to templating engines like Twig and Nunjucks that have an idea of first and last of a loop for conditional logic.

From the Nunjucks documentation as an example (mozilla.github.io/nunjucks/templat...

Inside loops, you have access to a few special variables:

loop.index: the current iteration of the loop (1 indexed)
loop.index0: the current iteration of the loop (0 indexed)
loop.revindex: number of iterations until the end (1 indexed)
loop.revindex0: number of iterations until the end (0 based)
loop.first: boolean indicating the first iteration
loop.last: boolean indicating the last iteration
loop.length: total number of items

If you don't have all that, then I'm all about that ::after use case! :D

[Vic Seedoubleyew]

Thanks!

Yeah I am using TeaVM's Flavour, so I don't think there is any of that yet.

Though I am still wondering whether even with that, it wouldn't make more sense to consider this comma as a layout choice, not content

[ut4utc]

Only yesterday I asked a question on stackoverflow for WordPress - how to add to the price of a variable product, left the word Price, and then, not finding the answer, I took it and made it through ::before

div.summary-inner span.price .amount::before {
content: 'Цена: ';
}

Watch result you can at here parketdoska.ua/каталог/acacia/акац...

[Bryan Robinson]

Great idea! I've used pseudo elements in similar situations. When I don't have control over the HTML (or as much control as I'd like), I know I can always insert some content with CSS.

[ut4utc]

In your article, a very interesting approach to gradient fills - I did not expect this, it looks great! Thank you!

I will need to use it somewhere in my new projects. I’ve almost finished going through a paid course about programming WordPress templates and I even had an idea, thanks Bryan to your article, how I can use this effect for my project that I want to create using my own programming template.

[Carlos Araya]

I use them with counters to add text and numbers to figures, chapters, and other repetitive content, something like this:

section[data-type='chapter'] {
  counter-increment: chapter-count;

  h1::before {
    content: 'Chapter ' counter(chapter-count) ': ';
  }

}

[Bryan Robinson]

Very nice! Yeah, I've seen this floating around more and more recently. I haven't had an opportunity to do it yet. Definitely some cool styling can be done with that, too

[Thomas Tortorini]

If you are meticoulous and don't want to create a full HTML element just for an icon, then you'll end up using ::before a lot. Imagine you have an handle area for dragndrop, then in the center of this handle area you'll add something like (fontawesome.com/icons/grip-lines?s...), then you can add it via ::before and use content: "\f7a4"; instead of adding a <i> element which is consist to adding HTML just for styling and this should not be accepted.

[Bryan Robinson]

That's a great use case. It's honestly the main use case that makes me miss using FontAwesome regularly. Tossing that entity in an ::after element is so easy! Love it!

[Sahin Mia]

I think without ::before and ::after pseudo elements modern ui design is not possible.

[Bryan Robinson]

It definitely would be much more difficult and we'd clutter up our HTML with a lot of things just for the design.

What's your favorite design pattern that uses them?

[Sahin Mia]

I am really new in Front end development. What exactly the design pattern means in css ? Is it a method to write css like BEM ?

[Bryan Robinson]

Sorry I wasn't clear! I mean what's your favorite way to use them?

I really enjoy using them to make interesting borders and accents bryanlrobinson.com/blog/2018/08/07...

[Antonio Radovcic]

Yes! Super useful for:

• RESPONSIVE TABLES
• Adding a backdrop to modals
• Adding arrows to boxes
• Custom-Checkbox-Graphics

[Bryan Robinson]

I think I've done all of those except the Custom Checkboxes. Mostly I'm too lazy for custom checkboxes :D

[Karolis]

I'm using pseudo elements for a range of problems, starting from simple tooltips via data-attr, to managing responsive images and their aspect ratios with padding-bottom hack. Also, for little dropdown arrows/chevrons, for css triangles etc etc etc.

[Bryan Robinson]

When I want to show people the power of modern CSS, I LOVE showing off the tooltip trick! You can do so much with Pseudo elements!

[Bryan Robinson]

That's an awesome use case! I've done something similar (a little less complex) with a timeline.

Also, I love the annotated screenshots, they're a great resource for learning!

[Vuild]

I use them for eyes. True story.

vuild.com/face 🤣

[Bryan Robinson]

😲 !!