CSS pseudo-elements are used to style a specific part of the selected element(s), such as:
- Adding content before or after the content of an element;
- Styling the first letter or the first line of an element;
- Styling part of document highlighted by the user;
- etc.
Pseudo-elements are added to a selector in the following way:
selector::pseudo-element { /* ... */ }
As you can see, a CSS pseudo-element is preceded by double colon (::
). This is to maintain a distinction from pseudo-classes which are preceded by a single colon (:
).
Please note that you can only specify one pseudo-element per selector.
For example:
/* add colon to every <label> element having for attribute */ label[for]::after { content: ':'; }
/* style first line of every <p> element */ p::first-line { font-weight: bold; }
/* style selections made in the document */ ::selection { color: white; background-color: blue; }
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.