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 Selectors Advanced Selectors Pseudo-Elements Challenge

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,158 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 36,158 Points

Final challenge in CSS Selectors

I have no idea where to start here. To which element are you referring in the statement: "First, in the top .progbar selector, add the pseudo-element that will insert content after the element." Which element? I don't know where to begin. I've put a lot of time and effort into this tutorial and I sure would like to finish.

2 Answers

Jake Ford
Jake Ford
9,230 Points
Jake Ford
Jake Ford
9,230 Points

The challenge went ahead and created three of the same .progbar selectors, which is a little confusing :D. It says the "top" .progbar, so you need to add a pseudo element onto the first .progbar selector listed. If you want to insert content after the .progbar selector, you use the "::after" pseudo element, like this:

    .progbar::after {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background-color: #5ece7f; 
}
Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,158 Points
Nancy Melucci
Nancy Melucci
Courses Plus Student 36,158 Points

Thank you so much for helping me get started. I finished it. The quiz is the easy part. Happy Holidays. I love Treehouse.