title: Brackets symbol with value on it as label
body: <p>I have a build like that one here:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;div&gt;[coil]&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div&gt;[coil]&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div&gt;[coil]&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The coil represents a 3D-ring built with css pseudo elements :after and :before.
  Now I want to display the width (in mm) like a description on the left side with a bracket like symbol but I can't figure out how. I experemented with a border and padding but it won't work how I imagined. </p>
  
  <p>It should be like that:
  <a href="https://i.stack.imgur.com/LKUFN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LKUFN.png" alt="enter image description here"></a></p>
  
  <p>Hopefully some of you css specialists can help me. </p>