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

Posted by Ryan J
Ryan J
140 Points

Pseudo-elements that don't follow the rules

http://teamtreehouse.com/library/websites/css-foundations-second-edition/advanced-selectors/pseudoelements

At 9:23 in this video Guil provides an example that doesn't follow the rules, but he fails to explain why.

<body>
    <p class="box">Text inside the box...</p>
</body>

.box{
    border: 2px solid;
}

.box:before {
    content: "\27BD";
}

The 'before' pseudo-element places the unicode symbol (27BD which is a double arrow) in front of the text instead of in front of the box itself. I'm assuming this is because the text is the element, not the border. So the class should really be named .text instead of .box?

1 Answer

Andrew Whitfield
Andrew Whitfield
5,239 Points
Andrew Whitfield
Andrew Whitfield
5,239 Points

Hi Ryan,

The pseudoelements prepend or append. http://stackoverflow.com/a/9198490

Details here: http://www.w3.org/TR/CSS21/generate.html#before-after-content

But practically: http://stackoverflow.com/a/5362843

It's the content to which the pseudo element refers rather than the element on which it's attached in CSS.

So, if you had .box:before {} it's not equivalent to adding before .box, but rather, before the content of .box

Does that help at all?