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

Michael Forster
Michael Forster
4,329 Points
Posted by Michael Forster
Michael Forster
4,329 Points

Need help with the third Question.

Hello guys, I tried to solve the Problem some time but now I give up and I also dont find any Solutions at the world wide web :). please help me

style.css 
/* Complete the challenge by writing CSS below */

.progbar {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
    background-color: #5ece7f; 
}

.progbar::before{

    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 49%;
    top: -9px;
    background-color: #7dd898;
  content: attr(href);
}

.progbar::after {
  height: 6px;
  border-radius: 3px;
  background: #d6d7d9;
  position: relative;
  margin-bottom: 3.875em; 
    content: "root";
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progbar"></div> 
    <a href="http://teamtreehouse.com">Check out the URL: </a>
</body>
</html>

2 Answers

Eric M
Eric M
11,546 Points
Eric M
Eric M
11,546 Points

Hi Michael,

It looks like you've got the right idea, but the challenge is asking you to add the pseudoelement selctors in very specific places.

The first task is to add the after pseudo element to the first progbar selector, in your code it's on the third. Then in the third task we're asked to add the before pseudo element to the second progbar selector. There's also instruction reminding us "Don't forget to write the content declaration on line 13."

While you've added the before pseudo element you've left off the content declaration. You also have "root" instead of "" (blank) in your after content declaration, and as mentioned earlier, the challenge is expecting after in the first item, not the third.

e.g.

/* Complete the challenge by writing CSS below */

.progbar::after {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
        background-color: #5ece7f; 
    content: "";
}

.progbar::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 49%;
    top: -9px;
    background-color: #7dd898; 
}

.progbar {
    height: 6px;
    border-radius: 3px;
    background: #d6d7d9;
    position: relative;
    margin-bottom: 3.875em; 
}

Cheers,

Eric

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

If you go back to task 1 and look at the instructions you will see: "First, in the top .progbar selector, add the pseudo-element that will insert content after the element."

But it looks like you added the pseudo-element to the last selector instead of the top one. The validator may not have caught that until you got to the 3rd task.