Pseudo-Elements
suggest changeIntroduction
Pseudo-elements, just like pseudo-classes, are added to a CSS selectors but instead of describing a special state, they allow you to scope and style certain parts of an html element.
For example, the ::first-letter pseudo-element targets only the first letter of a block element specified by the selector.
Syntax
- selector::pseudo-element {property: value}
Parameters
pseudo-element | Description |
––––––– | ———– |::after
| Insert content after the content of an element |::before
| Insert content before the content of an element |::first-letter
| Selects the first letter of each element |::first-line
| Selects the first line of each element |::selection
| Matches the portion of an element that is selected by a user |::backdrop
| Used to create a backdrop that hides the underlying document for an element in the top layer’s stack |::placeholder
| Allows you to style the placeholder text of a form element (Experimental) |::marker
| For applying list-style attributes on a given element (Experimental) |::spelling-error
| Represents a text segment which the browser has flagged as incorrectly spelled (Experimental) |::grammar-error
| Represents a text segment which the browser has flagged as grammatically incorrect (Experimental) |
Remarks
- Sometimes you will see double colons (
::
) instead of just one (:
). This is a way to separate pseudo-classes from pseudo-elements, but some older browsers like Internet Explorer 8 only supports single colon (:
) for pseudo-elements. - One can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.
- Pseudo-elements are not a part of the DOM, therefore are not targetable by
:hover
or other user events.