Pseudo-elements create cosmetic visual elements directly in CSS without adding unnecessary HTML tags.
1. The ::before and ::after Elements
Always require content: "" to render:
⊞Code Example
/* Custom decorative green dot before heading */
.section-title::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #04AA6D;
border-radius: 50%;
margin-right: 8px;
}
/* Custom styled placeholder in search inputs */
input::placeholder {
color: #64748b;
font-style: italic;
}