<main>
  <h1>BBC News sometimes uses a widget with a list where each bullet is 'connected' by a line. This is how it works.</h1>

  <ul>
    <li>
      <div class="bullet big">
        <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><path d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"></path><circle cx="16" cy="16" r="6"></circle></svg>
      </div>
      So, the line to the left..
    </li>
    <li>
      <div class="bullet">
        <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><circle stroke="none" cx="16" cy="16" r="10"></circle></svg>
      </div>
      is created using a <code>:before</code> pseudo-element on each <code>&lt;li&gt;</code>..
    </li>
    <li>
      <div class="bullet">
        <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><circle stroke="none" cx="16" cy="16" r="10"></circle></svg>
      </div>
      with no content, 2 pixels wide, red background color, and..
    </li>
    <li>
      <div class="bullet">
        <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><circle stroke="none" cx="16" cy="16" r="10"></circle></svg>
      </div>
      positioned absolutely relative to the list item.
    </li>
    <li>
      <div class="bullet">
        <svg aria-hidden="true" viewBox="0 0 32 32" focusable="false"><circle stroke="none" cx="16" cy="16" r="10"></circle></svg>
      </div>
      The bullets are rendered using SVG which I tweaked from the BBC but are essentially just drawing circles.
    </li>    
  </ul>
  
  <p><em>See <a href="https://codepen.io/anon/pen/gJpLrR">this pen</a> for an extension of the concept placing the bullet SVGs into the CSS too. <a href="https://twitter.com/saadatm/status/1125761823305797632">Credit.</a></em></p>
  <p><a href="https://twitter.com/peterc">@peterc</a></p>
</main>

/* Some basic defaults */
BODY {
  font-family: "Helvetica Neue", helvetica, sans-serif;
  font-size: 16px;
}

main {
  max-width: 640px;
  color: #222;
}

h1 { font-weight: 400; }

/* No normal bullets please */
ul {
  list-style-type: none;
}

li {
  /* You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page */
  position: relative;
  
  /* Use padding to space things out rather than margins as the line would get broken up otherwise */
  margin: 0;
  padding-bottom: 1em;
  padding-left: 20px;
}

/* The actual line being placed before each list item, tweak width and color as appropriate */
li:before {
  background-color: #c00;
  width: 2px;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 5px;
}
    
/* Start the line further down on the first list item */
li:first-child:before { top: 15px;  }

/* Stop the line short on the final list item */
li:last-child:before { height: 6px; }
    
/* Styles for the SVG bullet points */
.bullet { margin-left: -20px; width: 12px; fill: #c00; float: left; padding-right: 10px }
.bullet.big { width: 16px; margin-left: -22px; padding-right: 8px }

a { color: #06e; }