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: