Pseudo-classes & Pseudo-elements

Pseudo-classes — style by state or position

<style>
  li:nth-child(odd) { background:#eef2ff; }
  li:hover { background:#4338ca; color:#fff; }
  li { padding:10px; list-style:none; }
</style>
<ul>
  <li>Item one</li><li>Item two</li><li>Item three</li><li>Item four</li>
</ul>

A pseudo-class is an extra condition (after a colon) that says “only when this is true”. li:nth-child(odd) matches the 1st, 3rd, 5th... items and gives them a light background — instant zebra stripes. li:hover matches whichever item the mouse is currently over and flips it to indigo with white text. Notice you did not add any classes to the HTML; the pseudo-classes target items by their position and state automatically.

Pseudo-elements — inject content

::before and ::after create extra “virtual” elements you can style. They need a content property. Great for icons, decorations and badges.

<style>
  .note::before { content: "💡 "; }
  .req::after { content: " *"; color:#ef4444; font-weight:700; }
  .tag { position:relative; display:inline-block; background:#e0e7ff; padding:10px 14px; border-radius:8px; }
</style>
<p class="note">A tip with an auto icon.</p>
<label class="req">Required field</label>

A pseudo-element creates a brand-new bit of content that is not in your HTML. .note::before inserts a 💡 emoji before the paragraph’s text, and .req::after inserts a red * after the label — perfect for marking required fields without editing the HTML. The rule both must follow: a pseudo-element only appears if you give it a content: value (even content: "" for a purely decorative shape). ::before goes in front, ::after goes behind.