::before and ::after

Hi there,

May someone explain the concept of ::before and ::after pseudocode. I’ve passed the section of making the heart but I don’t fully understand the concept and why I would use that bit of code.

Thanks in advance!

The ::before and ::after pseudo selector is a way to put a something before and after the element. It is very straight forward. So example if there is a <p> tag, and you used a ::before selector and typed in content: "hello", It will put the text hello infront of the paragraph. You would most of the time use this to create custom icons and buttons. You can learn more about them here:

  • ::before
  • ::after

Ah ha! Thank you for the examples, I understand this now!