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

twitter logo github logo ・1 min read

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 course for them.

It got me wondering, how many developers are using them in production.

Question

Do you currently use ::before and ::after? If so, what sorts of design patterns do you use them for?

If not, why don't you?

Oh and if you've never used one, I've got a great primer over here.

twitter logo DISCUSS (28)
markdown guide
 

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.

 

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

 

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

 

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

 

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

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

 

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

 

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.

 

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.

 

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.

 

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!

 

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) ': ';
  }

}

 

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

 
 

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

 

Yes, I used them in production. I have a dev-to article where I explain a case where I use them for making lines connecting circles.

My rule is to try to limit non-semantic HTML clutter as much as possible, which tends to have indirect benefits for concerns such as SEO and accessibility. In the article, I chose to use span tags for separation between horizontal circles, as to use pseudo elements for what I wanted to do I was going to have to add non-semantic parent containers anyway, and the resulting code would have ended up more cluttered.

 

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!

 

I'm glad you think so! Frankly, the articles are not getting likes etc., so I was worried the whole thing was too overwhelming and complex. My intention was for the series to be a learning resource, so I spent the extra effort to add the details that people don't tend to get in other articles on similar topics. Glad to see at least one person appreciates the effort!

 

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

 

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?

 

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 ?

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

 

As anything a pseudo-element can do, an HTML-element can do, I don't believe there is any design that requires pseudo-elements. Let me know if you have a different understanding.

 

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.

 

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!

 
Classic DEV Post from Nov 15 '18

Don't be a mockup developer

Many times as a mobile developer I have to work on apps without the API ready that was crucial for the feature I was implementing. Either the backend was developed by another team that was not entirely in sync with us or our backend team had no chance to implement those endpoints earlier. For this reason, I was not able to satisfy the Definition of Done but it does not mean that I have implemented the UI only.

Bryan Robinson profile image
I'm a designer, developer, lover of static sites and CSS

dev.to is where software developers stay in the loop and avoid career stagnation.

Sign up (for free)