Pseudo-elements
5 min read
::before and ::after insert generated content without adding extra HTML. They must have a content property, even content: ''. Use for decorative elements, custom bullets, and tooltip arrows in CSS.
Pseudo-elements
/* ::before and ::after */
.card::before {
content: "";
display: block;
height: 4px;
background: var(--color-primary);
}
/* Add icon before links */
a[href^="http"]::after {
content: " ↗";
font-size: 0.8em;
}
/* Style first line / letter */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; float: left; }