如何为包含文本的整个div元素添加括号样式边框？

嘿，这个需求我之前也碰到过！用border来做括号确实会卡在上下边框间距的问题上，其实有更灵活的方案，我给你分享两种最实用的：

方案一：用伪元素直接插入括号字符（推荐） #

这种方法最简单，而且适配性极强，不管文本是单行还是多行，都能轻松搞定。核心思路是利用:before和:after伪元素在div的左右插入括号字符，然后通过间距控制让它和文本完美配合。

代码示例： #

HTML结构：

<div class="bracket-container">
  这里是你要包裹的所有文本内容，哪怕是多行也没问题哦！
</div>

CSS样式：

.bracket-container {
  display: inline-block; /* 让容器自适应文本宽度，也可以用block占满整行 */
  position: relative;
  padding: 4px 16px; /* 左右留白给括号留出位置，上下留白控制文本和括号的垂直间距 */
  font-size: 16px;
}

.bracket-container:before,
.bracket-container:after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 让括号垂直居中对齐文本 */
  font-size: 2em; /* 调整括号大小，比文本大一圈更显眼 */
  color: #2d3748; /* 括号颜色，和文本区分开 */
}

.bracket-container:before {
  left: 0;
  content: "(";
}

.bracket-container:after {
  right: 0;
  content: ")";
}

优势： #

• 代码极简，维护成本低
• 括号样式和文本风格统一，支持任意括号类型（比如[]、{}，直接改content里的字符就行）
• 自动适配文本高度，单行多行都能完美对齐

方案二：用Border自定义括号样式（适合特殊设计需求） #

如果你的需求是非字符型的自定义括号（比如粗线条、圆角括号），可以用border结合伪元素来实现，解决你之前遇到的上下边框间距问题。

代码示例： #

.bracket-container {
  display: inline-block;
  position: relative;
  padding: 12px 8px; /* 上下留白给括号的上下线段 */
}

/* 左侧括号 */
.bracket-container:before {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  height: calc(50% - 8px); /* 控制上半段边框的高度，实现上下间距 */
  border-left: 3px solid #2d3748;
  border-top-left-radius: 6px; /* 圆角模拟括号的弧度 */
}

.bracket-container:after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 4px;
  height: calc(50% - 8px);
  border-left: 3px solid #2d3748;
  border-bottom-left-radius: 6px;
}

/* 右侧括号 */
.bracket-container::before {
  content: "";
  position: absolute;
  right: -8px;
  top: 4px;
  height: calc(50% - 8px);
  border-right: 3px solid #2d3748;
  border-top-right-radius: 6px;
}

.bracket-container::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 4px;
  height: calc(50% - 8px);
  border-right: 3px solid #2d3748;
  border-bottom-right-radius: 6px;
}

注意： #

这种方法通过计算上下线段的高度来控制间距，你可以调整top、bottom和height的值来精准控制括号的上下留白，完全自定义线条粗细、颜色和圆角。

小技巧 #

如果要让括号和文本的间距更精准，可以调整padding或者伪元素的margin值；如果是多行文本，把display: inline-block改成display: block，括号会自动撑满整个div的高度。

内容的提问来源于stack exchange，提问作者imanebz