DEV Community

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

Collapse
viccw profile image
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

Collapse
brob profile image
Bryan Robinson Author

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:

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/акац...

Collapse
viccw profile image
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

Thread Thread
brob profile image
Bryan Robinson Author

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

Thread Thread
viccw profile image
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