如何使用css伪元素选择器添加装饰内容

使用::before和::after伪元素可为元素添加装饰性内容，需配合content属性生效，常用于插入图标、符号或样式修饰，如标题箭头、列表圆点、引用引号等，提升视觉效果且不改变HTML结构，保持语义清晰，适用于非关键信息的展示。

使用CSS伪元素选择器可以在不修改HTML结构的情况下，为元素添加装饰性内容。这些内容通常用于样式增强，比如插入图标、修饰符或简单的文本提示，且不会影响文档的语义结构。

常用伪元素选择器

CSS提供了两个主要的伪元素来添加装饰内容：

• ::before：在元素内容前插入内容
• ::after：在元素内容后插入内容

这两个伪元素必须配合 content 属性使用，否则不会生效。

基本语法与用法

通过 content 属性定义要插入的内容，可以是纯文本、特殊符号、计数器或引用属性值。

立即学习“前端免费学习笔记（深入）”；

示例：在每个标题后添加一个装饰性箭头

h2::after {
content: " →";
color: #888;
}

这样所有 h2 标题后面都会显示一个灰色右箭头，仅用于视觉提示，不影响HTML结构。

Calliper 文档对比神器

文档内容对比神器

28

查看详情

结合CSS实现图形装饰

伪元素常用来创建不需要额外标签的图形效果，比如小圆点、边框延伸、悬浮提示等。

示例：为列表项添加小圆点装饰

li::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background-color: #007acc;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
}

这个小圆点由CSS生成，无需在HTML中加入额外的 span 或 i 标签。

使用引号或特殊字符

content 支持插入特殊符号，如引号、心形、箭头等，可以直接写入或使用Unicode编码。

示例：为引用文字添加引号

blockquote::before {
content: "“";
font-size: 1.5em;
color: #aaa;
}
blockquote::after {
content: "”";
font-size: 1.5em;
color: #aaa;
}

这样就能自动为每段引用加上美观的引号，保持HTML简洁。

基本上就这些。合理使用 ::before 和 ::after 能有效减少冗余标签，提升样式的可维护性，同时让装饰内容与结构分离，更符合现代前端开发实践。注意：伪元素添加的内容仅用于展示，不适合放置关键信息或SEO相关内容。