Pseudo‑Classes & Pseudo‑Elements

Pseudo‑classes (:hover, :focus, :nth-child, :not, :has) target states or structure of an element.

Pseudo‑elements (::before, ::after, ::first-line, ::first-letter) create virtual child elements.

---

Example: Fancy button with ::after

.btn {
  position:relative; padding:0.8rem 1.5rem; overflow:hidden;
}
.btn::after {
  content:""; position:absolute; inset:0; background:linear-gradient(45deg,var(--c1),var(--c2));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.btn:hover::after { transform:scaleX(1); }