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...
Collapse
 
jnschrag profile image
Jacque Schrag

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.

Collapse
 
brob profile image
Bryan Robinson

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

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

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

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

Collapse
 
ut4utc profile image
ut4utc

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
 
brob profile image
Bryan Robinson

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.

Collapse
 
ut4utc profile image
ut4utc

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.

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

Collapse
 
mr21 profile image
Thomas Tortorini • 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.

Collapse
 
brob profile image
Bryan Robinson

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!

Collapse
 
shahin059 profile image
Sahin Mia

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

Collapse
 
brob profile image
Bryan Robinson

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?

Collapse
 
shahin059 profile image
Sahin Mia

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 ?

Thread Thread
 
brob profile image
Bryan Robinson

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

Collapse
 
niorad profile image
Antonio Radovcic

Yes! Super useful for:

Collapse
 
brob profile image
Bryan Robinson

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

Collapse
 
cogitoergo profile image
Karolis

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.

Collapse
 
brob profile image
Bryan Robinson

When I want to show people the power of modern CSS, I LOVE showing off the tooltip trick! You can do so much with Pseudo elements!

Collapse
 
brob profile image
Bryan Robinson

That's an awesome use case! I've done something similar (a little less complex) with a timeline.

Also, I love the annotated screenshots, they're a great resource for learning!

Collapse
 
vuild profile image
Vuild

I use them for eyes. True story.

vuild.com/face 🤣

Collapse
 
brob profile image
Bryan Robinson

😲 !!