如何为CSS实现的3D线圈添加左侧带数值的括号标注？

我来帮你搞定这个带宽度数值的括号标注效果！之前用border和padding没达到预期，大概率是没精准利用伪元素来控制括号的线条形态，下面给你一套可行的解决方案：

1. 调整HTML结构 #

首先给每个环形组件(coil)添加一个标注容器，方便我们单独控制括号和数值：

<ul class="coil-list">
  <li class="coil-item">
    <span class="width-label">20mm</span>
    <div class="coil"></div>
  </li>
  <li class="coil-item">
    <span class="width-label">15mm</span>
    <div class="coil"></div>
  </li>
  <li class="coil-item">
    <span class="width-label">10mm</span>
    <div class="coil"></div>
  </li>
</ul>

2. CSS实现括号标注 #

利用伪元素::before和::after来绘制括号的上下两段线条，同时让数值垂直居中对齐环形组件：

/* 列表整体样式 */
.coil-list {
  list-style: none;
  padding: 0;
  margin: 20px;
}

.coil-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* 宽度标注样式 */
.width-label {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 40px; /* 和环形组件高度保持一致，实现垂直居中 */
  color: #333;
}

/* 绘制左括号的上半部分 */
.width-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 14px;
  border: 2px solid #333;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 4px;
}

/* 绘制左括号的下半部分 */
.width-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 14px;
  border: 2px solid #333;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 4px;
}

/* 你的3D环形组件样式（这里保留伪元素实现框架，可直接替换成你自己的代码） */
.coil {
  width: 60px;
  height: 40px;
  position: relative;
}

.coil::before,
.coil::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #666;
  border-radius: 50%;
}

.coil::before {
  transform: perspective(80px) rotateX(45deg);
}

.coil::after {
  transform: perspective(80px) rotateX(-45deg);
}

效果说明 #

• 通过flex布局让标注和环形组件垂直对齐，保证视觉一致性
• 伪元素精准控制括号的线条粗细、圆角和位置，完美还原你想要的括号形态
• 标注的line-height和环形组件高度匹配，确保数值垂直居中
• 你可以根据实际需求调整括号的颜色、粗细，以及标注的字体大小、间距等参数

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