The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.
The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g. selected with the mouse or another pointing device) by the user.
::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.
The ::first-letter CSS pseudo-element selects the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The ::first-line CSS pseudo-element applies styles only to the first line of an element. The amount of the text on the first line depends of numerous factors, like the width of the element, width of the document, and the font size of the text. As all pseudo-elements, ::first-line does not match any real HTML element.
The ::-moz-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-element to change the placeholder text color.
The ::-moz-range-progress CSS pseudo-element represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input> of type="range", which corresponds to values lower than the value currently selected by the thumb.
The ::-moz-range-thumb CSS pseudo-element represents the thumb, the virtual knob the user can move within the groove, or track, of an <input> of type="range" to alter its numerical value.
The ::-moz-range-track CSS pseudo-element represents the track, that is the groove in which the indicator of an <input> of type="range" slides.
Each element in the top layer's stack has a ::backdrop pseudo-element. This pseudo-element is a box rendered immediately below the element (and above the element below the element in the stack, if any), within the same top layer.
The ::grammar-error CSS pseudo-element represents a text segment which the browser has flagged as having grammatical error(s).
The ::-ms-fill-lower CSS pseudo-element represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input> of type="range", which corresponds to values lower than the value currently selected by the thumb.
The ::-ms-fill-upper CSS pseudo-element represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input> of type="range", which corresponds to values greater than the value currently selected by the thumb.
The ::-ms-thumb CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.
The ::placeholder CSS pseudo-element represents the placeholder text of a form element. This allows web developers and theme designers to customize the appearance of placeholder text.
The ::spelling-error CSS pseudo-element represents a text segment which the browser has flagged as incorrectly spelled.
The non-standard proprietary ::-webkit-input-placeholder pseudo-element represents the placeholder text of a form element. This allows web developers and theme designers to customize the appearance of placeholder text. This pseudo-class is only supported by WebKit and Blink.
The ::-webkit-slider-thumb CSS pseudo-element represents the "thumb" that the user can move within the "groove" of an <input> of type="range" to alter its numerical value.