My Favorite Pseudo Elements
Most people don’t spend time thinking about CSS selectors, and honestly, even most developers probably don’t have “favorites.” But every now and then, I catch myself appreciating a few of the lesser-used pseudo-elements. They’re easy to overlook, but I like the way they solve problems or add just the right touch when you need them.
::marker
In conjunction with a list item it selects the marker box. For a UL this is the bullet and for a OL the number. Additional styling can be used to manipulate font, color, and other properties
::first-letter
The ::first-letter pseudo-element is your go-to for giving the first letter of a paragraph some extra flair—think of those fancy drop caps you often see in blogs. It only works when there’s no other content (like images or inline tables) before the text on the same line. Also, keep in mind that ::first-letter only applies to block-level elements, so it’s perfect for styling your paragraphs or headers.
See also ::first-line
::selection
When a user highlights part of a webpage — like dragging the mouse over some text—the ::selection pseudo-element comes into play. This handy little tool lets you customize the look of that highlighted section. By default, the background color of selected text is blue, but with ::selection, you can switch it up to any color you like.
Be careful messing with defaults – users may expect a certain behavior to remain constant.