::before, ::after, ::first-letter and ::selection.
✍️ 3 exercises + code challenge in this lessonA pseudo-element styles a specific part of an element. It is written with two colons.
::before and ::after: insert content before or after the element (requires the content property).::first-letter and ::first-line: style the first letter or line.::selection: the part the user highlights.::placeholder: placeholder text in inputs.::marker: list bullets.Mastering CSS Pseudo-elements helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<style>
.drop::first-letter { font-size: 42px; color: #2563EB; float: left; line-height: 1; margin-right: 6px; }
.tag::before { content: "#"; color: #14B8A6; }
.new::after { content: " NEW"; font-size: 11px; background: #E34F26; color: white; padding: 2px 6px; border-radius: 4px; }
::selection { background: #14B8A6; color: white; }
</style>
<p class="drop">Once upon a time, a developer learned CSS pseudo-elements and the pages became beautiful. Select this text!</p>
<p class="tag">webdev</p>
<p class="new">Programming tutorials</p>Check what you learned in “CSS Pseudo-elements”.
Insert content before every element with the class "tag".
.tag:: {
content: "#";
}
Which property is required for ::before and ::after to show anything?
Use ::after to add the text " ✓" after the element with the class "done".
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services