css pseudo elements

CSS Pseudo-Elements — Style Specific Parts of Elements

by

Want to style parts of an element without adding extra HTML? CSS Pseudo-Elements let you target specific parts of an element, like the first letter or line, or insert decorative content. This makes your CSS cleaner and your markup simpler. In this MiniCoursey quick guide, you’ll learn how pseudo-elements like ::before and ::after work, plus some handy examples you can use in your projects today.

What Are CSS Pseudo-Elements?

CSS Pseudo-Elements let you style or create parts of an element that don’t exist in the HTML. They start with a double colon :: for clarity and modern standards, though older single colon syntax is still supported for backward compatibility.

::before and ::after

The most common pseudo-elements are ::before and ::after. These let you insert content before or after an element’s actual content — great for decorative icons, quotes, or labels.


.button::before {
  content: “👉 “;
}

.button::after {
  content: ” ✅”;
}

Other Useful Pseudo-Elements

Besides ::before and ::after, there are others worth knowing:

  • ::first-letter — Styles the first letter of a block, great for fancy drop caps.
  • ::first-line — Styles the first line of a block of text.
  • ::selection — Styles the highlighted text selection.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

::selection {
  background: #007acc;
  color: #fff;
}

💡 Pro Tip: Remember that pseudo-elements are still part of CSS — you can’t interact with them via JavaScript as normal DOM elements.

⚠️ Common Mistake: Don’t forget to use content with ::before and ::after — without it, nothing appears!

FAQ

Q: Can I style pseudo-elements like regular elements?
A: Yes — you can apply colors, backgrounds, borders, but not all CSS properties make sense for every pseudo-element.

Q: Are pseudo-elements widely supported?
A: Absolutely — all modern browsers fully support them.

Related Link

👉 Check out previous: CSS Overflow — Hidden, Scroll & Auto Explained

Where to Learn More

Try adding icons, quotes, or highlights using pseudo-elements in your next project. MDN has clear references for all supported pseudo-elements.

Conclusion

Congrats — you now know how to make your CSS smarter with Pseudo-Elements. Use them to add extra style without cluttering your HTML!

✨ Bookmark MiniCoursey for more quick & free mini courses!

Leave a Comment