Pseudo-elements can control the styling of specific parts of the elements. The pseudo-elements have a double colon before them and can be used by being added after the selectors like
The pseudo-elements supported by CSS are:
This is to stylize the first line of the text content. You can alter the following for this element:
This element concerns the first letter of the text. In addition to above mentioned properties, first-letter can also by stylised for:
This pseudo-element helps us to insert anything before the element content. You can insert an image before your text using ::before.
It is the opposite of ::before. Here, you can add something after the element content.
The selection of text generally inverts the background and font color of the selected text. For example, if you select a black text on white background, it will turn to something like white text on black background. However, these effects can be changed in web-pages using the pseudo element ::selection. ::selection can help us set the background color as well as the font color of the selected text. The IE 8 and earlier versions don’t support this pseudo-elements.
Multiple pseudo elements
We can also combine the effects of the pseudo-elements. For example, if you want the first letter to be in one color and rest of the first line in another color, you can set both the ::first-letter and the ::first-line for that element. Similarly, you can combine the effects of first line with ::selection or add some image before or after the text using ::before and ::after.
Apart from this, you can also combine the pseudo element with the element classes. All have to do is mention the element then its class and finally the pseudo element, like: