DEV Community

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

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

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