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 trialMichael Forster
4,329 PointsNeed 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
/* 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";
}
<!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
11,546 PointsHi 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
231,269 PointsIf 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.