在CSS中，伪元素 ::before和 ::after是广泛使用的功能，它们允许设计师在元素内容的前面或后面插入内容，这些内容不在文档树中，因此不会影响页面结构和语义。使用这些伪元素可以创建各种视觉效果，优化布局，而无需额外的HTML代码。
使用 ::before和 ::after的常见技巧
1. 装饰性元素添加
可以使用 ::before和 ::after向页面元素添加装饰性的图形或标记，例如引号、图标、小形状等。例如，可以为引用块添加引号：
blockquote::before {
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote::after {
content: close-quote;
font-size: 4em;
line-height: 0.1em;
margin-left: 0.25em;
vertical-align: -0.4em;
}
2. 清除浮动
在有浮动元素的容器中，使用 ::after可以自动清除子元素的浮动，避免父元素高度坍塌：
.clearfix::after {
content: "";
display: block;
clear: both;
}
3. 样式复用
若多个元素需要相同的装饰效果，可以使用 ::before和 ::after代替重复HTML标记，增强代码复用性：
.button::before, .button::after {
content: '>';
margin: 0 5px;
}
4. 实现复杂的布局设计
可以利用 ::before或 ::after模拟额外的框架或背景，甚至在不影响原始布局的前提下，创造独特的设计元素。
5. 制作图表和进度条
伪元素可以用来制作简单的图表或进度条界面，通过调节 ::after的宽度，可以表现进度变化：
.progress-bar::after {
content: '';
display: block;
height: 20px;
background-color: blue;
width: 50%; /* 进度50% */
}
6. 创建细微交互动效
通过 :hover伪类和 ::after搭配，可以为用户交互添加视觉反馈，例如按钮按下的效果：
.button:hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.2);
}
7. 字体图标
借助字体图标库，::before和 ::after可以插入图标而不必使用图片：
.icon::before {
font-family: 'FontAwesome';
content: '\f007'; /* 字符的Unicode编码 */
}
8. 创建自定义列表标记
使用 ::before可以实现自定义的列表标记样式，这样就不必受限于浏览器提供的有限选项：
.custom-list li::before {
content: '★';
color: gold;
margin-right: 5px;
}
9. 响应式工具提示
实现简单工具提示功能，无需JavaScript即可展示额外信息：
.tooltip::after {
content: attr(data-tooltip);
visibility: hidden;
position: absolute;
bottom: 100%;
}
.tooltip:hover::after {
visibility: visible;
}
以上提及的技巧只是 ::before和 ::after伪元素功能的冰山一角。它们为前端开发者提供了强大的装饰和布局工具，使得不添加额外标签仍然能实现复杂的设计需求，极大地提高了CSS的灵活性和工作效率。当然，在具体的工作场景中，使用这些伪元素时，需要仔细考虑兼容性和性能因素，以确保在不同浏览器和设备上都能够顺畅运行。
