Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
If you’ve ever styled a placeholder inside an <input>, you’ve already met a pseudo-element — even if you didn’t realize it.
? What Are Pseudo-elements?
input::placeholder {
color: silver;
}
You're not styling the whole input — you're specifically targeting the placeholder inside it. That placeholder is a pseudo-element.
All pseudo-elements start with a double colon ::, like ::before, ::after, or ::selection.
Here’s a quick reference table of useful pseudo-elements, what they do, and how important they are (in my opinion ?):
Most browser dev tools (like Chrome and Firefox) let you inspect pseudo-elements directly in the Elements tab. Open DevTools, select an element, and you’ll often see ::before, ::after, or others appear in the sidebar when used.
Final Thoughts
Pseudo-elements are small but powerful — they let you enhance your UI without bloating your HTML with extra tags.
Hope this list helps you recognize and use them more effectively in your next project! ?
If you found this useful, drop a
or share your favorite pseudo-element in the comments!
See you in the next post! ?
? What Are Pseudo-elements?
For example, when you do this:
input::placeholder {
color: silver;
}
You're not styling the whole input — you're specifically targeting the placeholder inside it. That placeholder is a pseudo-element.
All pseudo-elements start with a double colon ::, like ::before, ::after, or ::selection.
? Common Pseudo-elements You Should Know
Here’s a quick reference table of useful pseudo-elements, what they do, and how important they are (in my opinion ?):
| Pseudo-element | What It Does | Priority |
|---|---|---|
| Inserts content after an element |  | |
| Inserts content before an element | | |
| Styles the part of text the user selects | | |
| Styles the button inside <input type="file"> | | |
| Styles bullets or numbers in lists | | |
| Styles the overlay behind <dialog> | | |
| Targets the content of a <details> element | | |
| Styles the first letter of a block | | |
| Styles the first line of text | | |
| Highlights text targeted by URL fragment | | |
| Styles video captions (WebVTT) | | |
| Powers page transition animations | |
? How to See Pseudo-elements in Action?
Most browser dev tools (like Chrome and Firefox) let you inspect pseudo-elements directly in the Elements tab. Open DevTools, select an element, and you’ll often see ::before, ::after, or others appear in the sidebar when used.
Final ThoughtsPseudo-elements are small but powerful — they let you enhance your UI without bloating your HTML with extra tags.
Hope this list helps you recognize and use them more effectively in your next project! ?
If you found this useful, drop a
or share your favorite pseudo-element in the comments!See you in the next post! ?