JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
<ul>
<li>Foo</li>
<li>Ein Ring, sie zu knechten, sie alle zu finden<br>ins Dunkel zu treiben und ewig zu binden</li>
<li>Bar</li>
</ul>
<p class="listheading">And now for something completely different</p>
<ul>
<li>Life of Brian</li>
<li>The Meaning of Life</li>
<li>MP and the Holy Grail</li>
<li>Jabberwocky</li>
</ul>
</nav>

CSS

nav {
  --item-indent: 3ch;
  --bullet-out: -1.5ch;
  --text-left: calc(var(--item-indent) + var(--bullet-out));
  background: linear-gradient(
		to right,
		transparent 0, var(--text-left),
		green 0, calc(1px + var(--text-left)), transparent 0);
}
ul {
  padding-left: var(--item-indent);
  list-style: none;
}
li::before {
  content: '•';
  float: left;
  margin-left: var(--bullet-out);
}
p.listheading {
  margin-left: var(--text-left);
}