https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html
Hello fellow coders I am having a tough time understanding why content: “”; adds another //css heart:after to finish making the heart and placing it in the perfect pistion right now it feels like magic if anyone has some way of explaining this that be very helpful
The content
property is used with :before and :after to actually generate the content, like the completion of the heart. The :before
and :after
selectors literally place content before and after the item your styling. In the CSS code, if. you were to comment out the .heart:before
and .heart:after
, you’d end up with a square. The top
and left
CSS properties are what add the rounded heart corners, but they cannot be placed until you define content
. By using only ""
, you’re not necessarily adding any content to your HTML or CSS. You’re leaving the content as styled in your CSS, which can now be generated since you’ve now defined the content
property, even if there is nothing between ""
.