Need Help Understanding why something works the way it does

HTML-CSS
1

**Hello everyone,
I am relatively new to coding (grew up in the MySpace era…really wish my mom had encouraged me to learn more about coding besides how to make my page rain hearts haha!

anyways, I am on the "make a heart lesson, and I need help understanding why part of the code does a thing.

For the .heart::after {, and the .heart::before {…when you add content: “” on both…Why does this action create the rounded corners of the heart? Why does this work? Is it similar to a copy/paste function? I am having difficulty understanding why it creates the semicircles even though nothing is inbetween the “”.

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

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

1 Like
2

it makes the after and before pseudoelements appear

try resetting the code and adding the content as first step so you see also the two before and after pseudoelement change

3

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