Pseudo-elements create virtual sub-elements within an element without adding HTML. They use double colon syntax: ::before, ::after, ::first-line.
The most commonly used are ::before and ::after for inserting decorative content.
/* Double colon is the modern standard */
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; float: left; }
h2::before {
content: "# ";
color: #007bff;
}
/* ::after adds content after the element */
.required::after {
content: " *";
color: red;
}Use double colons (::) for pseudo-elements and single colons (:) for pseudo-classes — though single colons still work for legacy pseudo-elements.