How does empty string in ::before pseudo-element makes a heart?

Why does it so? How come “” - empty strings in ::before, content: “”; - makes a heart?

Hi and welcome to the forum.

Can you share some code so we can better understand what you’re asking?

Hi,

The pseudo-elements ::before and ::after are empty so without any content they won’t appear on the screen.
Adding
content:"";
even though it is an empty string makes the ::before appear on the page and it is by styling the border on this empty pseudo-element that it can be made to show a heart, or triangle or any other simple shape.

Hope that helps and happy coding :slightly_smiling_face:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.