Create a More Complex Shape Using CSS and HTML, Help!

HTML-CSS
1

Tell us what’s happening:

Not sure what I am doing wrong, the output to the far right appears to look as it should…please help?! Thanks!

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:65.0) Gecko/20100101 Firefox/65.0.

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

2

You need to use two colons :: for the pseudo-element.

heart::before

heart::after

More info:

CSS3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :after , introduced in CSS2.

3

is needed and why an empty string?

Thanks! Can you please explain why the double :

4

I updated my first post. The test wants you to use the CSS3 version so that is what is tested for. Browsers will accept the old version, likely forever as they need to keep backward compatibility.

Without the content property the pseudo-element will not render, and as we don’t want text we just use an empty string.

5

Thanks! That makes more sense now. Im still new to all of this but trying to learn so that hopefully I can pass he exam when I apply at Fullstack academy, Gracehopper