Have a glance on Pseudo Elements....
Table of contents
What is Pseudo-element?
Pseudo-elements are used in CSS to style particular elements of the webpage. For adding style to a particular state such as hovering, selecting etc. For applying style to different states of elements, there are different methods, which have different syntaxes. The basic syntax of writing pseudo-elements is defined below.
Syntax:
selector::pseudo-element{
property:Value;
}
1) ::before
When there is a need to add style to the element, before any particular element. At that time it is used. On a webpage anywhere before a specific element if you want to add any content or for applying a style, it can be used.
As shown in the above example, the word 'before' is added before lorem text. CSS code is written in a style.css file and linked to the index.HTML file. In a CSS file, content written is a word 'before', same way according to your need you can modify it and can also add or remove other properties.
2)::after
When there is a need to add style to the element, after any particular element. At that time it is used. On a webpage anywhere after a specific element if you want to add any content or for applying a style, it can be used.
As shown in the above example, the word 'after' is added after lorem text. CSS code is written in a style.css file and linked to the index.HTML file. In a CSS file, content written is a word 'after', same way according to your need you can modify it and can also add or remove other properties.