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

Posted by Alycia Goodenough
Alycia Goodenough
2,148 Points

Task 4 of 4 CSS

I am writing the correct code and have inserted it in many places. What am I doing wrong?

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

.progbar a::after {
  content: attr (href);
  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; 
}

.progbar {
  height: 6px;
  border-radius: 3px;
  background: #d6d7d9;
  position: relative;
  margin-bottom: 3.875em; 
}
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>

3 Answers

Alycia Goodenough
Alycia Goodenough
2,148 Points
Alycia Goodenough
Alycia Goodenough
2,148 Points

The answer is without a space. I believe something may be wrong with the grader. When I wrote .progbara::after{ content: attr(href);

instead of

.progbar a::after{ content: attr (href);

I even watched the video, there is a space between the class and a. Why did the grader tell me I am wrong. :( ??

victor cooper
victor cooper
6,436 Points
victor cooper
victor cooper
6,436 Points

task 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.

You need to create a new rule for an "a" tag, it dosent say create a new rule for an "a" tag inside a .progbar class. Hope this helps.

Tamur Farrokhnia
Tamur Farrokhnia
27,197 Points
Tamur Farrokhnia
Tamur Farrokhnia
27,197 Points

Hi Alycia,

As Victor mentioned, you need to create a brand new rule that targets only "a" tags. Right now you are only modifying "a" tags that are inside the .progbar, and there aren't any "a" tags there!

Alycia Goodenough
Alycia Goodenough
2,148 Points

I had done that. I believe there was a glitch. I did not put a space between .progbar and a and then it worked. Thank you all for your help.