CSS pseudo-elements allow for an enhanced display of content within elements or the ability to generate extra beginning or ending content for elements.
CSS pseudo-elements (literally, "false elements") allow for an enhanced display of content within elements or the ability to generate extra beginning or ending content for elements. It allows for many CSS properties typically only available to real elements to be applied directly to content. Pseudo-elements are not to be confused with pseudo-classes.
List of CSS Pseudo-Elements
This is a list of all pseudo-elements that are currently included in CSS specifications (not any editor's drafts or upcoming specifications).
::first-line
and::first-letter
Selects the first line or letter within the text of the element.::before
and::after
Used to insert content before or after the content of the element using thecontent
property. Thecontent
may be set to text and embellished by other properties, or it may be left blank by settingcontent: ''
, allowing the pseudo-element to be used to make boxes, display background images, etc., without any textual content being generated. You cannot use these pseudo-elements to insert additional HTML, and you cannot use them with replaced elements (see below) which do not have actual content. This is because the generated content resides within the element.
Replaced Elements and Other Elements not allowing Pseudo-Elements
Any element whose appearance and/or dimensions are determined by some external resource is considered to be a replaced element, and are outside the scope of the CSS formatting model. Because of this, some pseudo-elements cannot be applied to replaced elements, in large part because they have no "content" themselves or they get replaced with something (such as user interface controls). Elements replaced or not holding content include images (<img>
), inline frames (<iframe>
), line breaks (<br />
), horizontal rules (<hr>
), plugins (<object>
), some form elements (<textarea>
, <input>
, and <select>
), videos (<video>
), audio sounds (<audio>
), and canvases (<canvas>
). Any other element is considered to be a non-replaced element, or is at least an element that contains content with which pseudo-elements may be used. For further information on replaced elements, see the HTML5 draft of the spec.