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
Rory Matthews
2,287 PointsWhat are some possible uses for the ::before and ::after pseudo-elements?
Why would I do that instead of just creating separate elements in the HTML?
Sorry if it's a silly question!
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHere's some more use cases for those pseudo elements:
http://css-tricks.com/pseudo-element-roundup/
You'll find that most, if not all of the time, they're used for stylistic reasons. The reason you don't want to add these extra elements in your html is because you're littering your markup with non semantic elements for the sole purpose of using them as css hooks so that you can simply attach more styles.
This doesn't keep your content and presentation layers separate.
Richard Duncan
5,568 PointsIf you look on this page top left where there is an arrow pointing to the nav menu on the left and the word Forum which darkens when you hover over the link this is a good example of where pseudo classes may be used.
Say you are using h4 elements to highlight key links for users of your website. You could as you say create additional elements in the mark up of your HTML, but this can get messy and what if you forget to add the element somewhere or you want flexibility in future to say update the arrow to a star. You could use the :before pseudo to apply an arrow onto the page as follows: -
h4:before{
content: "← ";
}
Arthur Verschaeve
20,816 PointsI use :after and :before in different cases. In a downloads page i use it to apply the extensions to the links: http://jsfiddle.net/nxYQS/ . Or if you want to apply quotes before and after a quote: http://jsfiddle.net/6hnQM/ . It is handy too when you need more than one border on an element. Checkout this: http://code.tutsplus.com/tutorials/quick-tip-multiple-borders-with-simple-css--net-12471
Rory Matthews
2,287 PointsThank you all for the responses, each valuable in their own right!