CSS References
CSS Pseudo-elements Reference
A pseudo-element lets you style a specific part of an element — its first line, its first letter, generated content before or after it, the text the user selects, or the marker on a list item. Pseudo-elements use a double colon (::) to distinguish them from pseudo-classes. This reference lists the standard pseudo-elements with examples.
Pseudo-elements table
| Pseudo-element | Example | Description |
|---|---|---|
| ::before | p::before { content: "→"; } | Inserts generated content as the first child of an element. |
| ::after | p::after { content: ""; } | Inserts generated content as the last child of an element. |
| ::first-line | p::first-line | Styles the first formatted line of a block. |
| ::first-letter | p::first-letter | Styles the first letter of a block — great for drop caps. |
| ::selection | ::selection | Styles the portion the user has highlighted. |
| ::placeholder | input::placeholder | Styles placeholder text inside form fields. |
| ::marker | li::marker | Styles the bullet or number of a list item. |
| ::backdrop | dialog::backdrop | Styles the backdrop behind a <dialog> or fullscreen element. |
| ::file-selector-button | input::file-selector-button | Styles the button of a file input. |
| ::cue | video::cue | Styles WebVTT captions in media. |
::before and ::after only render if you set the content property — even if it is an empty string (content: "";). Without it, nothing appears.
Generated content with ::before and ::after
The most-used pseudo-elements insert decorative content around an element. They are purely visual, so never put meaningful text that a screen reader must read there.
.price::before {
content: "\20B9"; /* the rupee sign ₹ */
color: #0f766e;
}
.tag::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: crimson;
border-radius: 50%;
}Typographic pseudo-elements
::first-letter and ::first-line let you apply classic print typography effects without extra markup.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 3rem;
float: left;
line-height: 1;
padding-right: 8px;
color: #0f766e;
}
p::first-line { font-variant: small-caps; }
::selection { background: #99f6e4; }
</style>
</head>
<body>
<p>Select some of this text to see the ::selection style, and notice the drop cap and small-caps first line created purely with pseudo-elements.</p>
</body>
</html>Only a limited set of properties apply to ::first-line and ::first-letter — mainly font, colour, background, margin, padding, border and text properties.