Create a More Complex Shape Using CSS and HTML-1

HTML-CSS
1

Having trouble with " The content of the heart::before selector should be an empty string?

/
/
/

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

/
/
/

2

Can you add a link to the exercise?

3

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

4

Right.

Checkout what the properties look like in ::after selector for content property.

You will notice it’s set to empty strings.

5

Should I put something in the string?

6

Nope. Leave it empty.