CSS Pseudo-elements
A CSS pseudo-element is a keyword that can be added to a selector to style a specific portion of the selected elements. For instance, when styling an element's first letter or line,
Insert content before or after an element's content. All of this is possible with CSS Pseudo Elements. Unlike pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax
There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
1. ::first-line pseudo-element
Styles are applied to the first line of a block-level element by pseudo-element. It is important to note that the length of the first line is determined by a variety of factors, including the width of the element, the width of the document, and the font size of the text. Only a few properties, such as font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, and so on, are applied to first-line pseudo-elements.
2. ::first-letter Pseudo-element
Styles are applied to the first letter of the first line of a block-level element when it is not preceded by other content (such as images or inline tables). Only a few properties, such as font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, and so on, are applied to first-line pseudo-elements.
3. ::before Pseudo-element
generates a pseudo-element that is the selected element's first child. It is frequently used with the content property to add cosmetic content to an element. By default, it is inline.
4. ::after Pseudo-element
creates a pseudo-element that is the selected element's last child. It is frequently used with the content property to add cosmetic content to an element. By default, it is inline.
5. ::marker Pseudo-element
selects a list item's marker box, which typically contains a bullet or number. It can be applied to any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
6. ::selection Pseudo-element
applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.
FAQs
The ::before pseudo-element is used to insert content before the content of a selected element, while the ::after pseudo-element is used to insert content after the content of a selected element. Both pseudo-elements can be used to add decorative or informative elements to the page, but they are placed in different locations relative to the selected element.
The ::marker pseudo-element is used to style the bullet point or numbering of a list item. This can be used to change the color, size, or shape of the bullet point or numbering, creating a more customized and visually appealing list.
The ::cue pseudo-element is used to style the text that appears in a media player's cue or subtitle track. This can be used to change the font, color, or other properties of the cue text, making it easier to read or better suited to the design of the page.