CSS Pseudo Elements ::before And ::after Explained
CSS pseudo elements ::before & ::after add content before/after an element, controlled by `content` property. Used for cosmetics, decorations & hover effects.
✨ What are ::before and ::after?
They are pseudo elements in CSS that are used to insert content, as their name says, either before or after the targeted element.
Syntax 👇
element::before {
content: /* value */;
}
element::after {
content: /* value */;
}
The content property specifies the type of content to be displayed within an element or pseudo-element. It accepts a string, image URL or Unicode characters as values.
⚠️ For pseudo-elements, it is important to specify the content property with a valid value otherwise they are not rendered. Val...