In this section, we will learn what the Pseudo Element Selector is and how to use it in CSS.
Pseudo Elements in CSS
In, elements have tags. For example, <html>, <body>, <input>, <form>, <p> etc. We use these tags in our HTML documents to add new elements and contents.
But other than these official elements, there are other elements that we don’t call them element particularly! They are more like unofficial elements or pseudo elements! (Note: the word `pseudo`, means not real).
For example, the first character of a text content or the first line of a paragraph in a <p> element! These are not official element since they don’t have their own tags and attribute etc. and yet, they are elements of a document! So that’s why we call it Pseudo-Elements.
Now, in HTML, there are selectors we can use to access such type of elements which we call these selectors as Pseudo Element Selectors.
CSS Pseudo Element Selector Syntax:
This is the general syntax of pseudo element selectors:
selector::pseudo-element {
property: value;
}
Pseudo-element selectors target unofficial elements on a page. For example, the first line of a paragraph, or the first letter of a paragraph, etc. Now, sometimes there are many paragraphs on a page and we might want to only change the style of the first line of a specific paragraph only! For this reason, pseudo-elements for the most cases are mixed with typical selectors!
So here the `selector` is typical CSS selector we’ve seen so far (for example it could be the name of a class or the value of an id attribute, etc.) and we use them to focus on a specific element/s on a page.
`::pseudo-element`: after declaring the target element/s using the selector, comes the declaration of the pseudo-element! Here, we declare what pseudo element (first letter, first line, etc.) we want to style in the target element/s that are targeted using the `selector`.
(Note that pseudo elements start with either the double colon `::` or single colon `:` mark).
For example:
p::first-line{
//body...
}
This selector is saying find the entire <p> elements of the page and apply the style of the declaration block on the first line of the paragraphs.
Note: the selector part is optional and we can directly use the pseudo-element selectors.
For example, if we directly set the selector to `::first-line`, that means, target the entire first-lines on a page no-matter what element held each paragraph! (For example, <h1> and <p> elements will be the target of this selector).
List of Pseudo Elements in CSS:
In short, these are the pseudo-element selectors supported in CSS:
- ::after : This selector is used to add content after the content of an element.
- ::before : This selector is used to add content before the content of an element.
- ::first-letter: Using this selector we can target the first letter of paragraphs of the elements like <p> and style that first letter.
- ::first-line: Using this selector, we can target the first line of paragraphs created using elements like <p> and style them.
- ::selection: Using this selector we can target paragraphs on a page that is selected (Like when we click and drag over a text content in order to select all or a portion of that text content).
CSS Pseudo Element: after
The pseudo element selector ::after is used to add a new text content to an element in a page! Note that this new content will be added as the last child of the target element!
Note: we use a CSS property called `content` to add the new text content to the target element. Also, be aware that any text content we put as the value of this property will be literally interpreted the way it is. For example, if we set an HTML element as the value of this property, that HTML element will be interpreted the way it is.
Example: using pseudo element ::after in CSS
See the Pen using pseudo element ::after in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Element: before
The pseudo element selector ::before is used to add a new text content to an element on a page. Note that this new content will be added as the first child of the target element.
Note: we use a CSS property called `content` to add the new text content to the target element. Also, be aware that any text content we put as the value of this property will be literally interpreted the way it is. For example, if we set an HTML element as the value of this property, that HTML element will be interpreted the way it is.
Example: using pseudo element ::before in CSS
See the Pen using pseudo element ::before in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Element: first-letter
The pseudo element selector ::first-letter targets the first letter of a text content and apply CSS style to it.
For example:
h2::first-letter{
//body...
}
The target of this selector is the first character of the entire h2 elements on a page. (Note that we can use the pseudo-element on its own too! In that case, the target becomes the first letter of the entire paragraphs on a page no-matter what elements were used to create those paragraphs).
Example: using pseudo element ::first-letter in CSS
See the Pen using pseudo element ::first-letter in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Element: first-line
The pseudo element selector :first-line is used to target the first line of paragraphs in a page.
For example:
.level:first-line{
//body...
}
The target here is to find the entire elements on a page that have the class attribute with the value `level`, select their first lines, and apply the style of the declaration block to them.
Example: using pseudo element ::first-line in CSS
See the Pen using pseudo element ::first-line in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
CSS Pseudo Element: selection
The CSS pseudo element selector :selection is used to target those text content that are selected by users. For example, when a user clicks and drags across a text content, that text is in selection mode and so the style we specify using this selector will be applied to that selected text.
Note: only a limited set of CSS properties can be applied to the selected text content! These properties are:
caret-color
outline and its related properties
text-decoration and its associated properties
text-emphasis-color
Example: using pseudo element ::selection in CSS
See the Pen using pseudo element ::selection in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Here’s another example combining “::selection” with “class attribute”
See the Pen another example combining “::selection” with “class attribute” by Enjoy Tutorials (@enjoytutorials) on CodePen.
