JSFiddle - React, Tailwind, and code Playground

by akogch

HTML

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

CSS

/* 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;
}