Https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html

Https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html
0.0 0

#1

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


#2

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