::before and ::after logic

[lexjp8748]

Hello. I am trying to understand the logic behind how .heart::before changes its shape the same way as .heart::after when I set its content to “” or an empty string. Also since .heart::before is like a reflection of .heart, couldn’t you just modify .heart’s content to “” and not having to use .heart::before at all?

  **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/96.0.4664.45 Safari/537.36

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

freeCodeCamp.org

[lasjorg]

I don’t really understand the question.

::before and ::after are pseudo-elements. They show up as child elements of the element they are defined on.

If you inspect the DOM it looks like this (if the pseudo-elements have content set).

<div class="heart">
  ::before
  other parent content
  ::after
</div>

The content property with an empty string is used with pseudo-elements to make them show up, otherwise, they won’t. You can add text as well but you usually wouldn’t do that if they are used as graphical elements.

<h2>Some title</h2>

<h2>Some other title</h2>

h2::before {
  content: "Chapter: ";
}

---

CSS Generated Content Module Level 3

The content property dictates what is rendered inside an element or pseudo-element.

For elements, it has only one purpose: specifying that the element renders as normal, or replacing the element with an image (and possibly some associated “alt text”).

For pseudo-elements and margin boxes, it is more powerful. It controls whether the element renders at all, can replace the element with an image, or replace it with arbitrary inline content (text and images).