CSS 伪元素
css · intermediate · 20-25 min · Step 1/5CSS 伪元素
::before 和 ::after 在元素内部创建虚拟子元素。
.badge::before {
content: '🔥'; /* 必须有 content */
margin-right: 4px;
}
/* 装饰线 */
h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: #3b82f6;
margin-top: 8px;
}
常见用途
| 用途 | 示例 |
|---|---|
| 装饰图标 | content: '★' |
| 下划线/装饰线 | 空 content + 背景色 |
| 清除浮动 | clearfix hack |
| 遮罩层 | absolute 定位覆盖 |
| 计数器 | content: counter() |
伪元素必须有content属性才会显示，即使是空字符串content: ''。