Definition:
When you apply pseudo-elements like ::before or ::after to any HTML element, they allow you to add extra content before or after that element without changing the actual HTML structure.
You can style this added content separately using CSS.
This feature helps decorate or enhance the webpage — like adding icons, quotes, or symbols — without touching the real content.
Syntax:
selector::pseudo-element {
property: value;
}Example:
HTML:
<p class="dynamic-text">In my tutorial</p>CSS:
p::before {
content: " welcome";
color: green;
}
p::after {
content: " :-)"; /* Emoji replaced */
color: blue;
}Output:
In my tutorial
Type inside the box above to see live ::before and ::after effect.List of Properties:
- ::before: Adds content before the selected element.
- ::after: Adds content after the selected element.
- ::first-line: Targets and styles the first line of text inside an element.
- ::first-letter: Targets and styles the first letter of text inside an element.
- ::selection: Styles the part of the text that a user highlights/selects with the mouse.
- ::marker: Styles the bullet or number of list items.
- ::placeholder: Styles the placeholder text in input or text area fields.