The difference between position relative and absolute

Hi, can anyone tell me why the position of the heart::before and heart::after needs to be in absolute? And why doesn’t it work if it’s in position: relative? 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(-45deg) ;
}
.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content:"" ;
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class="heart"></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

You actually can solve this using relative positioning for the before and after pseudo elements but it requires you change the display type on them. Read the first answer from this stackoverflow thread for an explanation and then go for it.

Because you need to take off the shape from the normal flow to actually make the hearth shape. If you find some troubles understanding positioning in css read this article: Positioning - Learn web development | MDN

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