Confused about ::before pseudo class

Tell us what’s happening:
Describe your issue in detail here.
While working on a freecodecamp challenge about making a heart using ::before and ::after pseudo elements, I dissected the css code provided in order to understand how the pseudo classes work. Although the ::after pseudo element seems to work as one would expect it to work (the element moves to the right as I increase the left offset value owing to its absolute position), the ::before pseudo element appears at the top of the div element with the class of heart. I have tried commenting out the position and position offsets of the pseudo element in different combinations based on my understanding but it remains at the top. Maybe this is how it is supposed to work, maybe not but the problem is that based on what I read and understood, shouldn’t the ::before pseudo element appear on the left of the div with the class of heart? Please explain why this is not the case. Thank You!

  **Your code so far**

<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate();
}
.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 100px;
}
.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -100px;
  left: 0px;
}
</style>
<div class="heart"></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.88 Safari/537.36

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

You are using absolute positioning here so they appear where you position them.

Do the following:

  • Give the :after and :before different colors so you can see exactly where there are.
  • Remove the rotation transform on .heart
  • Remove the top property on :before
  • Remove the left property on :after

After you do the above four steps you will see their default position using absolute positioning.

Hey! I just tried the things you suggested and it’s clear to me now. Thank You!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.