Why do we have to use ::before and ::after pseudo classes?

HTML-CSS
1

Why do we need to use before and after pseudo-classes to make a heart? Can’t we make it without them?

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: ;
}
.heart::after {
  background-color: blue;
  content: "";
  border-radius: 25%;
  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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html

2

It is possible to make a heart without using these pseudo-elements, but the point of the exercise is to show you how pseudo-elements work. In order to make a heart like this, we are using 3 elements. Instead of writing out 3 elements in HTML, we can use ::before and ::after to make the heart.

3

Thanks, @lucassorenson. Can I use only before class for an element? I need to know what it does to the element when we use it only before class?

4

::before creates a pseudo element (ie only exists visually, not part of the DOM) before the element. ::after creates one after it. You can only have one of each, which is why both are used here.