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

**URL:** <https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [September 13, 2019, 12:03pm UTC](https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181 "2019-09-13T12:03:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anasansari157](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anasansari157/32/123775_2.png) [@anasansari157](https://forum.freecodecamp.org/u/anasansari157)\
**Post date:** [September 13, 2019, 12:03pm UTC](https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181/1 "2019-09-13T12:03:52Z")

</div>

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**

```html

<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:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![lucassorenson](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lucassorenson/32/115883_2.png) [@lucassorenson](https://forum.freecodecamp.org/u/lucassorenson)\
**Post date:** [September 13, 2019, 12:28pm UTC](https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181/2 "2019-09-13T12:28:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![anasansari157](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/anasansari157/32/123775_2.png) [@anasansari157](https://forum.freecodecamp.org/u/anasansari157)\
**Post date:** [September 13, 2019, 12:33pm UTC](https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181/3 "2019-09-13T12:33:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [September 13, 2019, 2:04pm UTC](https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181/4 "2019-09-13T14:04:18Z")

</div>

::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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [March 9, 2021, 11:25am UTC](https://forum.freecodecamp.org/t/why-do-we-have-to-use-before-and-after-pseudo-classes/314181/5 "2021-03-09T11:25:21Z")

</div>