CSS Pseudo Elements Selector is used to select a specific part of HTML Element. For example first line of element or first letter or content before or after an element.
Table of Contents
Use of CSS Pseudo Elements Selectors
Pseudo Elements Selectors are used to select the specific part of element. They can be used to insert the content before HTML Element or after HTML Element.
For example: Pseudo Elements Selector after is used to insert content after the html element.
Syntax of CSS Pseudo Elements Selectors
The syntax of CSS Pseudo Elements Selector is shown below.
p::first-line {
color: #red;
}
Double Colon(::) is an important part of all Pseudo Elements Selectors.
Example of CSS Pseudo Elements Selectors
Look at the simple example below, this simple example will change the color of only first letter of the paragraph element.
p::first-letter {
color: red;
}
This next example will insert the image of car before the H1 HTML Element.
h1::before {
content: url(car.jpg);
}
This next example will change the color of selected text to red.
::selection {
color: red;
}
List of CSS Pseudo Elements Selectors
The List of all CSS Pseudo Elements Selectors is given below.
| CSS Pseudo Elements Selectors | Example | Description |
|---|---|---|
| ::after | p::after | It inserts something after the content of each paragraph element. |
| ::before | p::before | It inserts something before the content of each paragraph element. |
| ::first-letter | p::first-letter | It selects only first letter of paragraph element. |
| ::first-line | p::first-line | It selects only first line of paragraph element. |
| ::selection | p::selection | It selects the part of paragraph element that is selected by user. |