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

Posted by Jerrrell Tan
Jerrrell Tan
5,607 Points

How did the ::after pseudo element appear on top the actual element?

(from Pseudo-Elements Challenge in the CSS Selectors course)

The progress indicator was made using the ::after pseudo element. How was the ::after pseudo element made to appear on top the <div> element?

here's the code from the challenge:

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>
style.css 
.progbar::after {
  content: "";
  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; 
}

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

The <div> element has no content initially, just a background color. So the ::after pseudo-element becomes content and is displayed on top.

You could get the same effect if you added content directly to the html:

    <div class="progbar">
      <div class="inside"></div>
    </div>

And then change the ".progbar::after" rule to select ".inside" instead.

Jerrrell Tan
Jerrrell Tan
5,607 Points

oohh right. I didn't realize that. I kept visualizing them as separate element/pseudo-elements instead of the ::after actually being contained in the <div>. Thank you!!