DEV Community

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

Collapse
 
elrond25 profile image
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) ': ';
  }

}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
brob profile image
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