<?xml version="1.0" encoding="utf-8"?>

CSS pseudo-element selector

CSS pseudo-element selector Bad Practice
CSS pseudo-element selector Best Practice

The CSS pseudo-elements allow you to style the elements or parts of the elements without adding any ids or classes.

If you want to style the first letter of every paragraph differently to make it look like a storybook — there's a selector that allows you to do just that! The selector p::first-letter will apply the chosen style to all of the first letters of all paragraphs. Other popular pseudo-elements are ::before and ::after to add cosmetic content before or after the element.

To learn more about pseudo-elements, check their comprehensive list on MDN Web Docs.[1]

Improve your UX & Product skills with interactive courses that actually work