title: Connecting vertical lines between CSS elements that are part of a table's rows
body: <p>I'd like to connect some CSS circles with a vertical line between them.</p>
  
  <p>I've attempted to use the pseudo-element <code>:after</code> selector as follows:</p>
  
  <pre><code>.circle {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 2px solid;
    position: relative;
    border-color: #889EB7;
  }
  
  .circle:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    left: 18px;
    top: 0;
    bottom: 0;
    border: 1px dotted;
    border-width: 0 0 0 1px;
  }
  </code></pre>
  
  <p>But I'm not getting any result at all.</p>
  
  <p>Photo for reference of what I'd like to accomplish:</p>
  
  <p><a href="https://i.stack.imgur.com/NGTXM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NGTXM.png" alt="enter image description here"></a></p>