Connected bullets

by Matt Swensen

HTML

<ul>
  <li>This is the first item</li>
  <li>And the second</li>
  <li>A longer one with multiple lines because there is just so much text that it has to wrap</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

CSS

ul {
  font-size: 24px;
  list-style-type: circle;
  list-style-position: outside;
  max-width: 250px;
}

li {
  padding: 16px 0 24px;
  position: relative;
}

li:not(:first-child)::before {
  content: '';
  position: absolute;
  height: 28px;
  top: 0;
  left: calc(-1em + 6px);
  border-left: 1px solid black;
}

li:not(:last-child)::after {
  content: '';
  position: absolute;
  height: calc(100% - 34px);
  left: calc(-1em + 6px);
  bottom: 0;
  border-left: 1px solid black;
}