Create a More Complex Shape Using CSS and HTML isn't marking as correct [SOLVED]

HTML-CSS
1

Tell us what’s happening:
I’ve put in the right things and watched the video but it’s still saying that’s it’s wrong. Is the question not marking answers correctly or is it broken?

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; rv:68.0) Gecko/20100101 Firefox/68.0.

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

This has now been solved by @ILM.

2

you have changed .heart::after to .heart:after - look at the error, and at your css
same for the other pseudo-element

1 Like
3

OK, now I see what you mean. Thanks though!