4 min read
•Question 9 of 49easyWhat are CSS Pseudo-elements?
Understanding ::before, ::after, and other pseudo-elements.
What You'll Learn
- What pseudo-elements are
- Common pseudo-elements
- Usage examples
What are Pseudo-elements?
Pseudo-elements create virtual elements using double colon ::.
Common Pseudo-elements
| Pseudo-element | Creates |
|---|---|
| ::before | Content before element |
| ::after | Content after element |
| ::first-line | First line of text |
| ::first-letter | First letter |
| ::placeholder | Input placeholder |
| ::selection | Selected text |
Examples
styles.cssCSS
/* Add icon before link */
a::before {
content: "→ ";
}
/* Clearfix */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* Style first letter */
p::first-letter {
font-size: 2em;
font-weight: bold;
}
/* Style placeholder */
input::placeholder {
color: #999;
}