When folks are learning HTML, CSS, and web development in general, the concepts of elements, classes, and selectors are all taught early on, and often grasped quickly. But what about their weird, colon-prefixed cousins that are often avoided and misunderstood?
elementis an HTML tag. Any valid markup with
classis an identifier you give to one or more
selectorcan be used to access HTML
pseudo-classtargets the state of an
elementrather than the element itself. Pseudo-classes always (should) follow a CSS
selectorand are preceded by a single colon
pseudo-elementis an "invisible" element originating from your CSS that is intended purely for styling purposes. (It does not become part of the DOM) Pseudo-elements always (should) follow a CSS selector and are preceded by two colons
::after are unique in the sense that they accept a "content" property. Without this property, the pseudo-element will not be style-able by your CSS. Often you will see
content: "" if the pseudo-element is only needed for styling. This is called generated content.
If you hear the term
pseudo-selector, it is an umbrella term covering both pseudo-element-selectors and pseudo-class-selectors. You can always tell the difference by checking to see how many colons there are. One for pseudo-class, two for pseudo-element.
caveat from MDN:
As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.