Символ скобок со значением на нем в качестве метки

Question

У меня есть вот такая сборка:

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

Катушка представляет собой 3D-кольцо, построенное из псевдоэлементов CSS: after и: before. Теперь я хочу отобразить ширину (в мм) как описание на левой стороне с символом в виде скобки, но я не могу понять, как. Я экспериментировал с рамкой и отступами, но это не сработает так, как я представлял.

Это должно быть так:

Надеюсь, некоторые из вас, css-специалисты, могут мне помочь.

Answer 1

Проверьте, поможет ли это вам.

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%;
}

<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>

Answer 2

Используйте <span> для данных, которые вы хотите показать слева с атрибутом data, и используйте :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>