带有价值的括号符号作为标签

Question

我在这里有一个类似的构建：

<ul>
    <li>
        <div>[coil]</div>
    </li>
    <li>
        <div>[coil]</div>
    </li>
    <li>
        <div>[coil]</div>
    </li>
</ul>

线圈表示使用css伪元素构建的3D环：after和：before。 现在我想显示宽度（以mm为单位），就像左侧的描述一样，带有象括号的括号，但我无法弄清楚如何。我用边框和填充物进行了探索，但它不会像我想象的那样工作。

它应该是这样的：

希望你们中的一些css专家可以帮助我。

Answer 1

使用<span>对要显示在左侧的数据使用data-attribute，并使用:after伪元素来获得所需的结果

ul {
  list-style: none
}

li {
  margin: 6px 0;
}

.coil {
  margin: 0 auto;
  position: relative;
  height: 35px;
  width: 220px;
  background: #C8C8C8;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
  border-top-left-radius: 50% .5em;
  border-top-right-radius: 50% .5em;
}

.coil:before {
  background: inherit;
  position: absolute;
  content: "";
  top: 8px;
  width: inherit;
  height: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
}

.coil:after {
  background: rgba(0, 0, 0, 0.4);
  content: "";
  position: absolute;
  height: 5px;
  width: 50px;
  left: 82px;
  top: 4px;
  border-radius: 50%;
}

.coil span:after {
  content: attr(data-value);
  width: 8px;
  top: 0;
  border: 1px solid black;
  position: absolute;
  border-right: 0;
  left: -16px;
  bottom: 0;
  line-height: 35px;
  text-indent: -12px;
}

<ul>
  <li>
    <div class="coil"><span data-value="2"></span></div>
  </li>
  <li>
    <div class="coil"><span data-value="4"></span></div>
  </li>
  <li>
    <div class="coil"><span data-value="1"></span></div>
  </li>
</ul>

Answer 2

检查这是否对您有所帮助。

＆＃13;

＆＃13;

ul {
  list-style: none
}

li {
  margin: 6px 0;
}

.coil {
  margin: 0 auto;
  position: relative;
  height: 35px;
  width: 220px;
  background: #C8C8C8;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
  border-top-left-radius: 50% .5em;
  border-top-right-radius: 50% .5em;
}

.coil span {
  position: absolute;
  border: 1px solid #000;
  border-right: none;
  width: 8px;
  top: 0.4em;
  bottom: 0.4em;
  left: -15px;
  font-size: 12px;
  font-family: arial;
}

.coil span:before {
  content: attr(data-value);
  position: absolute;
  top: 50%;
  line-height: 14px;
  transform: translateY(-7px);
  right: 20px;
}

.coil:before {
  background: inherit;
  position: absolute;
  content: "";
  top: 8px;
  width: inherit;
  height: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 50% .5em;
  border-bottom-right-radius: 50% .5em;
}

.coil:after {
  background: rgba(0, 0, 0, 0.4);
  content: "";
  position: absolute;
  height: 5px;
  width: 50px;
  left: 82px;
  top: 4px;
  border-radius: 50%;
}

＆＃13;

<ul>
  <li>
    <div class="coil"><span class="value" data-value="3mm"></span></div>
  </li>
  <li>
    <div class="coil"></div>
  </li>
  <li>
    <div class="coil"></div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;