在网页样式开发中，为文本两侧添加特殊字符是提升页面视觉层次感的常见需求，这类需求不需要修改原有的HTML文本结构，仅通过CSS就能实现，核心依赖伪元素和content属性。
基础实现原理
CSS的::before伪元素可以在选中元素的内容之前插入内容，::after伪元素可以在选中元素的内容之后插入内容，两者都支持通过content属性定义要插入的内容，特殊字符可以直接作为content的属性值。
基础代码示例
以下代码会为所有h2标签的文本两侧分别添加左引号和右引号：
/* 为h2标签左侧添加左双引号 */
h2::before {
content: "“";
color: #666;
margin-right: 4px;
}
/* 为h2标签右侧添加右双引号 */
h2::after {
content: "”";
color: #666;
margin-left: 4px;
}
特殊字符的两种引入方式
除了直接输入可见的特殊字符，还可以通过Unicode编码引入特殊字符，避免部分环境下字符显示异常的问题。
直接输入字符
适合常见的标点类特殊字符，比如引号、星号、箭头等，直接写在content属性值中即可，如上面的示例。
Unicode编码引入
对于不便于直接输入的特殊字符，可以使用+Unicode编码的形式，比如左箭头←的Unicode编码是2190，右箭头→的Unicode编码是2192，示例代码如下：
/* 为span标签两侧添加左右箭头 */
span::before {
content: "2190";
margin-right: 6px;
color: #ff6600;
}
span::after {
content: "2192";
margin-left: 6px;
color: #ff6600;
}
不同场景的适配方案
仅在特定状态添加字符
可以结合伪类选择器，只在元素处于特定状态时添加两侧字符，比如鼠标悬停时给链接两侧添加星号：
a:hover::before {
content: "*";
color: #f00;
margin-right: 2px;
}
a:hover::after {
content: "*";
color: #f00;
margin-left: 2px;
}
添加图片类特殊符号
如果需要的特殊符号不是文字字符，而是小图标，也可以通过content引入图片，示例如下：
/* 为提示文本两侧添加小图标 */
.tip::before {
content: url("https://ipipp.com/tip-left.png");
vertical-align: middle;
margin-right: 4px;
}
.tip::after {
content: url("https://ipipp.com/tip-right.png");
vertical-align: middle;
margin-left: 4px;
}
注意事项
- 伪元素
content属性是必须的，即使没有内容也要写content: ""，否则伪元素不会生效。 - 插入的特殊字符默认是行内元素，可以通过
display属性修改其显示类型，比如设置为inline-block调整宽高。 - 如果特殊字符和原文本的间距不合适，可以通过
margin或者padding属性调整间距。 - 部分特殊字符在不同字体下显示效果可能有差异，建议指定统一的字体族保证显示一致性。
常见问题解答
为什么我添加的字符不显示？
首先检查是否写了content属性，其次检查字符编码是否正确，如果是Unicode编码要确认格式是+4位十六进制编码，最后检查是否被其他CSS样式覆盖了颜色或大小导致看不见。
可以给input输入框的文本两侧加字符吗？
不行，因为input、img等替换元素不支持::before和::after伪元素，这类元素如果需要添加两侧字符，需要额外包裹一层容器元素，给容器添加伪元素来实现。