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
Myles Legendary Cornerback Ingram
11,273 PointsCode Challenge: Pseudo-Elements Challenge Stage 3 Advanced Selectors
Can anyone assist me in with these 1 of 4 tasks? having trouble Challenge Task 1 of 4
Let's use pseudo-elements to create a progress bar from a single element. First, in the top .progbar selector, add the pseudo-element that will insert content after the progbar element.
Challenge Task 2 of 4
In the same rule, add the property that lets us insert content into an element. The value should be an empty set of quotes.
Challenge Task 3 of 4
Next, in the second .progbar selector, add the pseudo-element that will insert content before the progbar element. Don't forget to write the content declaration on line 13.
Challenge Task 4 of 4
Finally, create a new rule that will insert a pseudo-element after an a element. As the content value, define a CSS function that will insert an href attribute's value as content.
/* Complete the challenge by writing CSS below */
.progbar {
display: block;
width: 50%;
height: 100%;
border-radius: inherit;
background-color: #5ece7f;
}
.progbar {
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;
}
<!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>
10 Answers
Garrett Levine
20,305 PointsYou're having trouble with the first task or all of the tasks?
The first task is asking you to change the entire selector from .progbar to something that would insert content after the progress bar.
this looks like this;
.progbar::after {
display: block;
width: 50%;
height: 100%;
border-radius: inherit;
background-color: #5ece7f;
}
After this, all before and after psuedo elements require you to have a certain attribute within their declaration, or else they will not run. They need something to inseert before or after, and this is done through adding the "content" attribute.
I think the remaining tasks may become easier after solving these two.
Myles Legendary Cornerback Ingram
11,273 PointsThanks . :)
xaerjskzwc
3,528 Pointstask 1 to 4
.progbar::after { content: ""; display: block; width: 50%; height: 100%; border-radius: inherit; background-color: #5ece7f; }
.progbar::before{ content:""; display: block; width: 24px; height: 24px; border-radius: 50%; position: absolute; left: 49%; top: -9px; background-color: #7dd898; }
a::after { content: attr(href): }
.progbar { height: 6px; border-radius: 3px; background: #d6d7d9; position: relative; margin-bottom: 3.875em; }
MUZ140570 Given Mabhena
3,326 Pointshow do solve task 4 on this code challenge
lindsey millen
1,936 PointsI just figured this out!
.progbar a::after { content: attr(href); height: 6px; border-radius: 3px; background: #d6d7d9; position: relative; margin-bottom: 3.875em; }
MUZ140981 Elvis Remwa
9,829 Pointshow do i solve task 3
MUZ140520 Tinashe Veremu
5,675 Pointsum stuck with first challenge
Richard Targett
4,960 PointsGoogle deserves the 12 points I got for completing these challenges. It led me here. Mind you I got the first 3. This is an interesting one though. Thanks for the tips. I understand more of it though since I went and implemented the ::befores into the site Im working on and I totally got it from here...
...Thanks to treehouse...and you...and google...and this thread XD
Frank Jimenez
5,498 PointsHi,
I am particularly stuck with Challenge 2, I can't really work it out.
Can someone help me out?
John Hofford
6,990 PointsFrank, it's actual a simple solution that made me mad once I got it.
You literally just need to add the style property for your Content and then leave the properties blank.
SPOILERS Below just in case you can't solve it.
.progbar::after { content: ""; display: block; width: 50%; height: 100%; border-radius: inherit; background-color: #5ece7f; }
Wietse Wierda
1,403 Pointslol thx john. apparently team treehouse does no accept singleqoutes
Anain Roibal
4,532 Points.progbar::after {
content: ""
display: block;
width: 50%;
height: 100%;
border-radius: inherit;
background-color: #5ece7f;
Learning coding
Front End Web Development Techdegree Student 9,937 PointsWhen I change after in before task one isn't passing anymore What is the code for challenge three? .
Houssam Hammouda
Front End Web Development Techdegree Student 7,546 Points.progbar::after {
display: block;
width: 50%;
height: 100%;
border-radius: inherit;
background-color: #5ece7f;
}
Bao Tran
Front End Web Development Techdegree Student 18,959 PointsFor Challenge 3 is just like step 1 but with value "before" instead of after.
For Challenge 4 linsey had answer it.
.progbar a::after { content: attr(href); }
Jason Myers
6,443 Pointsthis gave me trouble thanks guys this really helped ^_^
Myles Legendary Cornerback Ingram
11,273 PointsMyles Legendary Cornerback Ingram
11,273 PointsNevermind you guys. I Passed it but you can work it out for the others who may have trouble with it . Thanks