::before y ::after parecen cumplir la misma función en el desafío de Diseño Visual Aplicado

Español HTML-CSS
1

Cuéntanos qué está pasando:
Describe tu problema en detalle aquí.

Entiendo que los pseudo elementos ::before y ::after sirven para colocar algo antes o después de un elemento dado respectivamente. Sin embargo, en el desafío del corazón, encuentro confuso lo siguiente: las formas colocadas antes y después del rectángulo de la clase “heart” parecen ocupar la misma posición. Le cambié los colores por defecto para visualizarlo mejor y así poder comprender totalmente su funcionamiento pero sin embargo, quedé más confundido. ¿Por qué están casi en la misma posición? Es decir, ambos se ve antes del rectángulo de la clase “heart”. Para que quede más claro lo que intento entender, esto es lo que veo al cambiarle los colores al gráfico:

Captura web_5-11-2021_102033_www.freecodecamp.org

Dicho sea de paso, ya he completado el desafío pero quiero comprenderlo del todo. Desde ya les agradezco por la ayuda.

  **Tu código hasta el momento**


<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: green;
  content: "";
  border-radius: 25%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: "";
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class="heart"></div>

  **Información de tu navegador:**

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36 Edg/95.0.1020.40

Desafío: Crea una forma más compleja usando CSS y HTML

Enlaza al desafío:

2

Hola!

Tal vez la confusión va por esto:

Asumo que esto se presta a confusión ya que la lección lo explica así, pero no es correcto:

Estos pseudo-elements se utilizan para agregar algo antes o después de un elemento seleccionado.

::before y ::after se usan para añadir contenido antes y después del contenido al cual se le aplican los selectores.

Otra forma de explicarlo es: ::before y ::after insertan pseudo-contenido como el primer/último hijo al que se le aplican. Imagina algo así:

<!-- Antes de aplicar ::before -->
<div class="heart">
  <div class="heart--title"></div>
</div>

<!-- Después de aplicar ::before -->

<div class="heart">
  "pseudo"
  <div class="heart--title"></div>
</div>

Por otro lado, debes tener en cuenta que el elemento con clase heart tiene un alto (height) y ancho (width) específicos, por lo tanto el contenido de ::before y ::after se solapará.

Espero que sirva :slight_smile:.