Create a More Complex Shape Using CSS and HTML

HTML-CSS
1

Tell us what’s happening:

Why is this code not functioning properly? An empty string is " ", is it not?

Thank you for your input.

-Linus

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 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

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

3 Likes
3

This is not a browser issue. Further, the code you have entered is correct and your double quotes are fine. I’ve copied your code and entered it into my browser and it works and passes the tests. When you submit, is there a test that isn’t being marked as green?

1 Like
5

You did alright. This is the culprit - Just clear the space after the empty string in the content property. That should work. I’m using Chrome.

.heart:before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
1 Like
6

<style>

.heart {

transform:rotate(-45deg);

position: absolute;

margin: auto;

top: 0;

right: 0;

bottom: 0;

left: 0;

background-color: pink;

height: 50px;

width: 50px;

transform: ;

}

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

7

I got the error The background-color property of the heart::after selector should be pink. and The content of the heart::before selector should be an empty string.

.heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; transform: rotate(-45deg); width: 50px; } .heart:before { content: ""; background-color: pink; border-radius: 50%; height: 50px; position: absolute; width: 50px; top: -25px; left: 0; } .heart:after { content: ""; background-color: pink; border-radius: 50%; height: 50px; position: absolute; width: 50px; left: 25px; top: 0; }
8

.heart:before is differnt from .heart::before