::before/::after pseudo elements in CSS - A Complete guide

::before and ::after are CSS pseudo-elements that insert content before or after targeted elements. They need the content property to render and act like additional elements in the markup. These pseudo-elements add decorative elements, hover effects, and cosmetic content without changing HTML. They work on container elements but not empty ones directly. Empty elements can be targeted by wrapping them in containers. The attr() function allows attribute values in pseudo-element content.