Passing this challenge is very tricky - this can cause confusion

Challenge create-a-more-complex-shape-using-css-and-html has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

<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: "";  // when you add any extra space outside the empty string will not pass this challenge
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

content: “”; // when you addany extra space outside the empty string will not pass this challenge. Can’t you add any whitespace?

[QuincyLarson]

@ahmadabdolsaheb You’re the man. Thanks! Please keep us posted 👍

[QuincyLarson]

@ahmadabdolsaheb @owususamuel We just launched the new curriculum and learning platform. Please take a look at it: learn.freecodecamp.org

Do you still think this challenge is confusing or overly hard? If so, we would welcome improvements to this challenge.