Questions tagged [pseudo-element]

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 the content property. The content may be set to text and embellished by other properties, or it may be left blank by setting content: '', 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.