DEV Community

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

Bryan Robinson on June 17, 2019

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

Read full post

Jacque Schrag • Jun 17 '19

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 • Jun 18 '19

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

Vic Seedoubleyew • Jun 18 '19

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 • Jun 18 '19

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 • Jun 19 '19

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 • Jun 19 '19

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 • Jun 20 '19

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 • Jun 18 '19

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

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

Bryan Robinson • Jun 18 '19

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 • Jun 18 '19

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 • Jun 18 '19

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 • Jun 18 '19

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 • Jun 18 '19 • Edited

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 • Jun 18 '19

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 • Jun 17 '19

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

Bryan Robinson • Jun 17 '19

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 • Jun 17 '19

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 • Jun 17 '19

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 • Jun 17 '19

Yes! Super useful for:

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

Bryan Robinson • Jun 17 '19

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

Karolis • Jun 18 '19

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.