In this post lets learn about CSS pseudo-elements.
Before reading this article, read my previous one, which discusses about Simple CSS selectors.
The Pseudo elements in CSS help us do some functionality which can not be done with regular CSS properties.
For example, if we want to give an effect when we hover over a button we can use,
button:hover { }
And specify the CSS properties we need to apply.
List of CSS pseudo elements we are going to learn here.
- :before.
- :after.
Below are pseudo classes.
- :active.
- :hover.
- :focus.
The CSS combinator selectors and pseudo classes will be discussed in other articles and links will be given below.
:before and :after
The before signifies, a place before the element and after specifies a place after the element.
A content can be inserted before and after with help of these pseudo elements.
Before applying Pseudo elements,
After applying :before and :after pseudo elements.
The CSS code for it,
.pseudo::before{
content:'something before';
font-weight: 600;
font-size: 20px;
}
.pseudo::after{
content:'something after';
font-weight: 600;
font-size: 20px;
}
And thats how you can easily use pseudo before and after elements in your CSS workflow/
Thank you for reading!
If you like this article, Unicorn this one! Heart/Like this one and save it for reading it later.
Top comments (0)