CSS CSS Selectors Advanced Selectors Pseudo-Elements Challenge

Jason Widjaja
Jason Widjaja
7,904 Points

code

what is wrong with my code

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

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

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

Alexandr Bessmertnov
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexandr Bessmertnov
Front End Web Development Techdegree Student 16,542 Points

hey, Jason. I followed the instructions and got the result...

.progbar::after {
  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; 
}

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