Pseudo elements and classes
Let's first talk about the Pseudo classes There are some Pseudo classes below:-
NOTE: Below things will not work in this editor. If you want to test these things just use any editor in your desktop. I am taking example of anchor tag.
1) / unvisited link /
:link The link which is not visited yet and you want to add color to it. So that, users can know which links they have visited and which they don't. If you want to add CSS to it just do this. Example
You have an anchor tag
a:link { color: red; }
This link color will be red because you haven't visit it yet. If you have already visit it or you just visit it then the color will be purple maybe some different color in your desktop.
2) / visited link /
:visited You want to add color to the links which are visited. In that case, you have to use this Pseudo class.
a:visited { color: green; }
This is a link When you visit this link or click to this link the color will change to green because you have visited this link.
3) / mouse over link /
:hover Whenever you hover on a link or any other tag and you want to change the color then you have to use this class. You cannot only change the color but can do many things like adding background and many more.
a:hover { color: purple; }
4) / selected link /
a:active{ color: aqua; }
:active This is an active class. When you click on any link the time period when you click on the link and leave the right click of the mouse for that time period the color of the link will be aqua.
NOTE: Sometime people use these classes but the classes doesn't work. It because the order matter's for these classes and the order should be:
:link :visited :hover :active
Let's talk about some Pseudo elements. Here I will only talk about the before and after elements
::before is used to add some content before any HTML tag.
::after is used to add some content after any HTML tag.
Example: You have a paragraph tag.
My name is test
p::before{ content: " - Remember this"; }
Output will be: - Remember this My name is test
::After Example
Example: You have a same paragraph tag.
My name is test
p::after{ content: " - Remember this"; }
Output will be: My name is test - Remember this