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 form a single element. First, in the top .progbar selector, I don't know what code to write HELP!

style.css
/* 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; 
}
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>

2 Answers

Steven Parker
Steven Parker
203,729 Points

The instructions are truncated above. The rest says: "First, in the top .progbar selector, add the pseudo-element that will insert content after the element."

Hint: the pseudo-element name is contained in the instruction. :wink:

Can you give me the codes for this question please? Thanks