A pseudo-element is a browser-generated, stylable part of an element rather than a separate HTML element. The common forms ::before and ::after insert generated content before or after an element’s existing content. section 19.9
Use pseudo-elements to add small visual details without cluttering the HTML:
- Add paragraph marks, icons, or other characters with the content property. section 19.9
- Replace ordinary unordered-list bullets with custom characters such as pointing fingers, stars, or arrows. section 19.9
- Mark external links with an automatically added icon, or create custom numbered-list markers with CSS counters. section 19.9
- Use ::first-letter to style the first letter of a text block. section 19.9
A custom paragraph mark
p::after { content: '¶'; } This rule automatically places a pilcrow after every paragraph. Special characters can also be inserted with hexadecimal codes, such as content: '\0266f'; for a musical sharp sign. section 19.9
ul {
list-style-type: none; #1
margin-left: 0; #2
padding-left: 1rem; #2
text-indent: -1rem; #2
}
li::before {
content:'\261e\00a0'; #3
color: red; #4
font-size: 1.1em; #4
}
Inspect a complete custom-bullet rule that removes default bullets, adjusts indentation, and adds a colored pointing-finger character with ::before. section 19.9
Figure 19.2 Wikipedia marks external links with an icon.
View the external-link icon example, which demonstrates a practical visual cue created with a pseudo-element. section 19.9
