CSS CSS Selectors Advanced Selectors Pseudo-Elements Challenge

Let's use pseudo-elements to create a progress bar from a single element. First, in the top .progbar selector, add the p

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 element. Can anyone help me with the Challenge Task 1-4 please ? I don't know how to do this.

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

.progbar .after:{
  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; 
}
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>
Steven Parker
Steven Parker
203,717 Points

This question seems to be a duplicate. You might want to delete the other one.

2 Answers

sergio alvarez
sergio alvarez
15,202 Points

Hi, You have to remember that to use a Pseudo Element you need to use the ":" symbol, so the challenge wants you to use the ":after", you use a class, that is why there is an error

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