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
Kenn Hyatt
9,683 Points"Before" Psuedoclass
Could someone go into a little more detail about using the before psuedoclass to insert the icons. I know what it does but am unclear on its specific use in this particular situation.
Is it only used because you need the icon to be on top of the background in the div class "col-sm-6 hidden-xs" or does it have something to do with it being positioned on the left or right side?
4 Answers
Michael Pare
6,358 PointsYou could accomplish the same thing using the :after pseudo-class or by placing the icon into another div inside the .ft-icon div, so using the :before pseudo-class is sort of arbitrary here in terms of what gets outputted on the page.
As long as there is no html content inside the .ft-icon div, :before and :after will accomplish the same thing because there is no content inside the div to displace. If, however, there was a paragraph inside the div, you would have to be more careful as the image would be output either before or after the div content (paragraph text) depending on which selector you use to display the icon.
Since there is no html content in this div, whatever is in :before will simply display inside the div.
Content called in the :before and :after selectors are still "inside" the element they are called on, they just either precede or follow the html content within that element. That is why the background image called in the :before pseudo-class on this exercise still outputs on top of the background of the div. Example below:
<div> :before html content (if there is any) :after </div>
Michael Pare
6,358 PointsWhoops! Sorry for spamming your post, I pushed the post button a couple too many times :/
Michael Pare
6,358 Pointsaand sorry again
Kenn Hyatt
9,683 PointsLOL A very helpful answer, thank you good sir! I am sure we can assume that this is the best practice for including anything in empty div tags?
Michael Pare
6,358 PointsIn a simple case like this I would say yes, since it doesn't add unnecessary html markup.