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

johnny louifils
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
johnny louifils
Full Stack JavaScript Techdegree Graduate 18,926 Points
Posted by johnny louifils
.a{fill-rule:evenodd;}techdegree seal-36
johnny louifils
Full Stack JavaScript Techdegree Graduate 18,926 Points

i need help

I don't understand what it ask for

style.css 
/* 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 a::after {
  height: 6px;
  border-radius: 3px;
  background: #d6d7d9;
  position: relative;
  margin-bottom: 3.875em;
  content: attr(href);
}
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>

1 Answer

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Johnny,

I think the wording of part 4 of the challenge is kinda confusing. What they want you to do is set up a styling for all link elements (a), so place it outside of any classes or ids. Next it wants you to set the link up in such a way that it (the http address) will show after the links text. e.g.: TeamTreeHouse http://www.teamtreehouse.com. To accomplish this you need to target the links href attribute.

The code to do so would be

a::after{
   content:attr(href); 
}

Hope it helps, Max