A Pseudo selector is a keyword that can be added to the selector that specifies the special state of an element

for example change of button color when hovering and changing border color when validation is successful

general syntax

::Before

if you want to apply styling before the targetted element then::before is used

for example: to display the attachment chain icon before the hyperlink then we can use::before

::after

Styling to be applied after the selected element::after can be used

example: we have a date picker element, a tick mark will be displayed when the selected date is correct or in the correct format