re: Do you use CSS ::before and ::after pseudo elements? VIEW POST

re: 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 li...

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каталог/acacia/акац...


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

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 (

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


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

code of conduct - report abuse