Applied Visual Design: Create a More Complex Shape Using CSS and HTML

HTML-CSS
1

Ok guys, no issue with the lesson per say, but I do have a more general question as to what is happening behind the scenes.

My question is this. By placing the empty string it takes the rectangle with the one side rounded and magically turns it into a heart. Am I correct to assume that by adding the following:


.heart::before {
  content: "";
..........

that it actually creates a mirror image of the same shape and overlaps it thus creating the heart?

I could see through the code we edited that we created the initial shape, just trying to wrap my head around the css magic that content: " "; created in the code itself to turn it into a heart.

Thanks in advance!

2

Content acts as another later on top of the before layer. So yes, you are right you are taking the same shape, flipping it, and putting it on it’s own layer.

Here’s some nifty info that will help:

1 Like
3

Awesome, thank you @Tirjasdyn but…now you sent me down a rabbit hole that will surely take me away from my lessons :rofl:

Thank you very much for the link, I have booked marked it and will do my best to stay away from it until I am done with my lessons…but man it is hard…there is some really cool things that can be done with CSS…sure has come a long way since I first messed with it.

4

Try this, instead of following the order written in the challenge, add an empty string as content as first step of the changes you are doing, and change the color from blue to pink as last step, so you can see the pseudoelement change with the code you are typing

1 Like
5

@ilenia ok yeah thats what I was looking for…makes more sense now. I figured that was what was happening but as a career IT guy I always have to know WHY its doing something it is doing rather than taking something on faith.

Really appreciate all the feedback, really active community and I am anxious to learn more both from lessons and the wealth of knowledge in the community as a whole.

6

I know that feeling, you can’t stop that. Mine is just from my own excessive interest in html.

1 Like