Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Values and Units Numeric and Textual Data Types

Greta Honeycutt
Greta Honeycutt
1,903 Points
Posted by Greta Honeycutt
Greta Honeycutt
1,903 Points

::after vs. :after

I'm getting confused about pseudo-elements! In this video, they are using :after as a pseudo-element. I thought pseudo-elements used a double colon. What am I missing here?

3 Answers

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

It's either or. The double colon, was made to distinguish between elements(:after, :before), and selectors(:hover). However older browsers like Internet Exploder(IE) don't support double colons. So in the end it's best to use the single colon for the before and after pseudo-elements.

Justin Hill
Justin Hill
16,642 Points
Justin Hill
Justin Hill
16,642 Points

Hi Greta, I remember when I was working on the CSS course, somehow I got it into my head that the double colon was only a convention so that it was easier for a human reading the CSS to say, "Ah ha... that's a pseudo-element"... and that it didn't really matter which one you used. However, it looks like the double colon was introduced in CSS3 in an "official" capacity, and that the double colon is actually not compatible with some browsers. Apologies to Guil if I just wasn't paying close attention!

This page on MDN breaks down which browsers accept the double colon: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Allison Walker
Allison Walker
17,137 Points
Allison Walker
Allison Walker
17,137 Points

The double quotes were introduced in CSS 3 to distinguish them pseudo-elements (like ::first-letter) from pseudo-classes (like :hover). You can still use single quotes for pseudo-elements.

Source explaining the :after/::after pseudo-element - https://developer.mozilla.org/en-US/docs/Web/CSS/::after