::before和::after通过content属性为元素添加装饰性内容，常用于引号、三角提示框、分隔符等视觉效果，无需修改HTML结构，结合定位与样式实现丰富布局。
使用 ::before 和 ::after 伪元素可以在不修改HTML结构的前提下，为元素添加装饰性内容。它们通过CSS生成内容，常用于图标、引号、分隔线、悬停效果等视觉增强。
要使用 ::before 或 ::after，必须定义 content 属性，即使为空字符串也能生效。content 可以是文字、特殊符号、计数器或空值。
常见写法：
content: ""; —— 创建一个空内容，常用于图形装饰content: "★"; —— 插入星号作为装饰content: attr(data-label); —— 动态插入自定义属性值常用于引用文本的前后添加引号，提升可读性。
.quote {
position: relative;
padding: 10px 20px;
}
.quote::before {
content: "“";
font-size: 2em;
color: #999;
position: absolute;
top: 0;
left: 0;
}
.quote::after {
content: "”";
font-size: 2em;
color: #999;
position: absolute;
bottom: 0;
right: 0;
}用 ::before 或 ::after 绘制三角形，模拟气泡对话框或标签角标。
立即学习“前端免费学习笔记（深入）”；
.tooltip {
position: relative;
background: #007bff;
color: white;
padding: 10px;
display: inline-block;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #007bff; /* 形成向上的三角 */
}在导航菜单或列表项之间插入小图标或线条。
.breadcrumb li:not(:last-child)::after {
content: "›";
margin: 0 8px;
color: #ccc;
}这样每个非末尾的列表项后都会自动出现分隔符，无需手动添加HTML符号。
基本上就这些。只要合理使用定位、尺寸和边框，::before 和 ::after 能实现丰富的视觉装饰，而且不影响语义结构。注意设置 position 和层级（z-index）避免遮挡内容，同时保持可访问性。不复杂但容易忽略。
以上就是在css中如何用::before和::after制作装饰性内容的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
311
收藏
