Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Selectors Advanced Selectors Pseudo-Elements Challenge

Ramasubramanian MV
Ramasubramanian MV
1,691 Points
Posted by Ramasubramanian MV
Ramasubramanian MV
1,691 Points

How to add the pseudo-element that will insert content before the element and write the content declaration on line 13

Im totally stuck in Task 3 of 4, when adding the pseudo-element that will insert content before the element, and writing the content declaration on line 13.

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

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

.progbar::before {
  content: "line 30";
    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>
Ramasubramanian MV
Ramasubramanian MV
1,691 Points
Ramasubramanian MV
Ramasubramanian MV
1,691 Points

I have added the pseudo element that inserts content before the element in the 2nd .progbar but Im stuck of how to write content declaration on line 13

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,956 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,956 Points

Hi there,

all the third tag wants is an empty set of quotes for the content property. So this would be cleared the same as any other CSS rule.

.progbar::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 49%;
    top: -9px;
    background-color: #7dd898; 
}