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
Sam Lillicrap
12,127 Points:before & :after
Can someone explain these css pseudo elements to me? I've been writing css for a long time but somehow never learnt what they mean.
Thank you!
5 Answers
Adam Sackfield
Courses Plus Student 19,663 PointsHere is a demo i made with some examples, they CAN be transitioned and animated. I like the last one best pen just hover over the menu's will load slow as pulling icons from weloveicons site
Cena Mayo
55,236 PointsThat's about it. :) It's important to note that they have some drawbacks/limitations (list from a StackOverflow question:
- They can't be transitioned or animated
- You can't change their appearance dynamically with Javascript
- They are far less "important" to search engines
- They are cumbersome when it comes to debugging
- Their number is restricted to one :before and one :after element
- They aren't able to contain HTML-Tags, for example links or additional containers
- You hurt the concept of the separation of content and appearance
- Some HTML-Elements cannot have pseudo elements
Cena Mayo
55,236 PointsThis article at the MDN is really helpful (and contains examples using them).
Sam Lillicrap
12,127 PointsOkay so basically ::before will add content/styles before the element, and ::after adds content/styles after the element?
Sam Lillicrap
12,127 PointsSam Lillicrap
12,127 PointsThanks Adam - useful pen to see how it works. Seems much more efficient than adding in another div to the DOM to do the same job.
Also followed you on Codepen!
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsYeah it does, loads more potential for other effects i guess too.
Cool will follow you!