在网页设计中，为文字两侧添加花括号是一种很常见的装饰效果，常用于标题、引用内容或者特殊提示文本的样式优化。这种效果不需要修改原有的HTML文本结构，仅通过CSS就能实现，核心是利用伪元素和content属性来生成两侧的花括号内容。
基础实现方案：使用伪元素添加固定花括号
最基础的思路是给目标文本容器添加::before和::after伪元素，分别在前后位置插入花括号字符，再通过定位调整位置即可。这种方案适合花括号样式固定、不需要随文字内容变化的场景。
HTML结构
只需要一个普通的文本容器即可，不需要额外添加花括号相关的标签：
<div class="text-with-braces">这是一段带花括号的文字</div>
CSS样式代码
通过伪元素的content属性插入花括号字符，同时调整字体、颜色、间距等属性让效果更协调：
.text-with-braces {
position: relative;
display: inline-block;
padding: 0 20px; /* 给花括号留出空间 */
font-size: 16px;
color: #333;
}
/* 左侧花括号 */
.text-with-braces::before {
content: "{";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #666;
font-weight: bold;
}
/* 右侧花括号 */
.text-with-braces::after {
content: "}";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: #666;
font-weight: bold;
}
实现原理说明
这里给容器设置position: relative是为了让伪元素的绝对定位相对容器本身进行。伪元素的content属性直接写入花括号字符，通过top:50%和transform: translateY(-50%)实现垂直居中，左右分别定位到容器的边缘位置，再给容器添加左右内边距避免文字和花括号重叠。
进阶方案：动态生成适配的花括号
如果需要花括号的高度和文字行高匹配，或者需要自定义花括号的样式（比如用border绘制而不是字符），可以采用另一种方案，通过伪元素绘制花括号形状。
用border绘制花括号的CSS代码
这种方式可以自定义花括号的粗细、颜色，还能适配多行文字的场景：
.multi-line-text {
position: relative;
display: inline-block;
padding: 10px 30px;
font-size: 16px;
line-height: 1.5;
color: #333;
}
/* 左侧花括号 */
.multi-line-text::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 10px;
border: 2px solid #666;
border-right: none;
border-radius: 5px 0 0 5px;
}
/* 右侧花括号 */
.multi-line-text::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 10px;
border: 2px solid #666;
border-left: none;
border-radius: 0 5px 5px 0;
}
注意事项
- 如果使用字符形式的花括号，要注意不同字体的花括号样式可能有差异，建议指定统一的字体保证效果一致。
- 伪元素的content属性在部分旧版本浏览器（如IE8及以下）不支持，如果需要兼容这些浏览器，建议改用额外的HTML标签包裹花括号。
- 当文字内容动态变化时，使用border绘制的方案会自动适配容器高度，比字符形式的花括号适配性更好。
- 如果花括号需要和文字颜色保持同步，可以把伪元素的color属性继承父容器的颜色，或者直接使用currentColor关键字。
常见问题解答
为什么我的花括号显示位置和文字不对齐？
大概率是垂直居中的属性设置问题，检查是否给伪元素设置了top:50%和transform: translateY(-50%)，同时确认容器的定位属性是否正确设置。
可以给花括号添加动画效果吗？
可以，伪元素支持所有的CSS动画属性，比如可以给花括号添加颜色渐变、缩放等动画，只需要给::before和::after添加对应的animation属性即可。