::before / ::after | CSS-Tricks (2024)

Subin Varghese

Vin

I know I’m about 3 years late..but, nonetheless –

They just add content before or after specific elements.

Say I want a question mark ( ? ) added after every element.

I would style it like this:

<style>p::after{content: "?"}</style><p>Turn down for what</p>

Would give the following output:

Turn down for what?

Simple as that! ;)

“But why bother using them?” You may ask.
Apart from the obvious effort saving reasons, these are used to implement some cool css tricks!

Check out the ribbon at the bottom here: http://cybernext.in

Pure CSS my friend! The ribbon’s folded corners make use of ::before and ::after pseudo elements.

Check this out for more : https://css-tricks.com/snippets/css/ribbon/

Dave

Arkar Htun

Clark

Edis

It is not that silly at all. So, in all CSS versions up to and including CSS 2.1 there was no way to differentiate what is pseudo-class and what is pseudo-element.

I am still a beginner web developer, and although I now know a lot more than when I started, it is still sometimes confusing to properly differentiate what is pseudo-element and what is pseudo-class. The problem I believe many of us still share.

It is so much easier to to remember that two colon (::) syntax means pseudo-element, and that one colon (:) syntax means pseudo-class. No more guess work involved.

Thiago Frias

Don

It is. Here is a CodePen showing it.

Edis

In this particular case, no it is not an example of ::before pseudo-element. Let me explain it:

Pseudo-element generates a virtual element as a last child element inside targeted element. In case you did not know every letter in an element is in a sort of a virtual element called line box. In this case the <div> element was empty (no text, no line box), and when the ::after pseudo-element was created his content “hi” string (generated by content property), was the only thing inside that <div> element, and that is the little illusion that is confusing you.

For example, if you add any text in that <div> element, that “hi” string will end up as the last content in that element.

I hope that helps to clarify things for you, at least a little bit.

Firoz

Firoz

Edis

I do not think so, because content of the pseudo-element is not in the DOM (can not even be selected), therefore it only exists visually for the users of visual browsers, and that excludes screen readers and web crawlers which is not a good practice.

The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

The emphasis is mine. Source: MDN Docs

Firoz

Simon

Tobitron

Geoff Graham

It is pretty confusing, but there is indeed a difference. Both ::before and ::after are called pseudo-elements because they elements in and of themselves that are distinct but directly related to the element they are attached to.

I other words, .my-class::after is very much an element like .my-class and can be styled apart from it. Chris has an oldie but goodie on how they work and some interesting things you can do with them: https://css-tricks.com/pseudo-element-roundup/

Geoff Graham

Yes, it does. Something like this:

a::before {
content: "";
/* other properties */
}

Chris Coyier

Geoff Graham

::selection