What are CSS pseudo-elements and how do I use them?

What are CSS pseudo-elements and how do I use them?

CSS pseudo-elements are used to style specific parts of an element. For example, ::before and ::after can add content before or after an element's content.

Can you give me an example of how to use ::before?

Sure! You can use ::before to add decorative content. For instance:

h1::before {
  content: '★';
  color: gold;
}

This will add a gold star before every <h1> element.

What about ::after? How is it different?

::after works similarly to ::before, but it adds content after the element's content. For example:

p::after {
  content: ' - Read more';
}

This will append ' - Read more' to every <p> element.

Are there any other pseudo-elements I should know about?

Yes! Other common pseudo-elements include ::first-line and ::first-letter, which allow you to style the first line or first letter of a block of text.