在前端页面样式开发中，我们经常会遇到需要给元素添加装饰性效果的需求，比如给标题加前置图标、给卡片加特殊边框、给列表项加自定义标记等。如果直接添加额外的HTML标签来实现这些效果，会导致页面结构冗余，增加后续维护成本。而通过css选择器结合伪元素，就可以在不修改HTML结构的前提下实现各类装饰效果，既简洁又高效。
伪元素基础认知
css中的伪元素是依附于现有元素存在的虚拟元素，不会出现在DOM树中，常用的伪元素有两个：::before和::after。它们默认是行内元素，需要通过content属性来定义内容，即使内容为空也需要设置content: ""，否则伪元素不会生效。
伪元素可以和各类css选择器搭配使用，比如类选择器、ID选择器、属性选择器、结构伪类选择器等，精准定位到需要添加装饰效果的目标元素。
常见装饰效果实现示例
1. 标题前置装饰线
很多页面中的标题会带有一条短装饰线，我们可以给标题元素添加::before伪元素来实现，不需要额外添加HTML标签。
/* 类选择器结合::before伪元素 */
.title-with-line {
position: relative;
padding-left: 20px;
font-size: 18px;
color: #333;
}
.title-with-line::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 2px;
background-color: #1890ff;
}
2. 列表项自定义标记
默认的列表标记样式比较单一，我们可以通过属性选择器结合::before伪元素，给不同状态的列表项添加不同的装饰标记。
/* 属性选择器结合伪元素 */
li[data-status="done"]::before {
content: "✓";
color: #52c41a;
margin-right: 8px;
font-size: 14px;
}
li[data-status="pending"]::before {
content: "●";
color: #faad14;
margin-right: 8px;
font-size: 10px;
}
3. 卡片悬停装饰边框
给卡片添加悬停时的渐变边框效果，可以用::after伪元素配合结构伪类选择器实现，避免修改卡片本身的边框属性影响布局。
/* 结构伪类选择器结合伪元素 */
.card {
width: 300px;
height: 200px;
background: #fff;
border-radius: 8px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.card:hover::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 8px;
border: 2px solid transparent;
background: linear-gradient(45deg, #1890ff, #722ed1) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
4. 引用块装饰引号
引用块的前后装饰引号可以通过::before和::after同时实现，让引用样式更美观。
/* 元素选择器结合双伪元素 */
blockquote {
margin: 20px 0;
padding: 15px 40px;
background: #f5f5f5;
border-radius: 4px;
position: relative;
color: #666;
line-height: 1.6;
}
blockquote::before {
content: "“";
position: absolute;
left: 10px;
top: 5px;
font-size: 40px;
color: #ccc;
}
blockquote::after {
content: "”";
position: absolute;
right: 10px;
bottom: 5px;
font-size: 40px;
color: #ccc;
}
使用注意事项
- 伪元素的
content属性是必填项，即使不需要显示内容也要设置为空字符串content: "" - 伪元素默认是行内元素，如果需要设置宽高，需要手动设置
display: block或者display: inline-block - 伪元素定位时，需要给父元素设置
position: relative，伪元素设置position: absolute才能基于父元素定位 - 伪元素的内容无法通过用户选中复制，如果需要可复制的内容，不要放在伪元素的
content中
兼容性说明
目前主流浏览器都支持::before和::after伪元素，不过在IE8及以下版本中，需要使用单冒号语法:before和:after才能兼容。如果需要兼容旧版本浏览器，可以根据项目需求调整伪元素的写法。
通过合理搭配css选择器和伪元素，我们可以实现非常多实用的装饰效果，减少不必要的HTML标签，让页面结构更清晰，样式代码更易维护。实际开发中可以根据具体需求灵活组合不同的选择器和伪元素属性，实现更丰富的视觉效果。