JSFiddle - React, Tailwind, and code Playground

by nickcoutsos

HTML

<body>
  <ul>
    <li>foo</li>
    <li>
      <p>bar</p>
      <ul>
        <li>baz</li>
        <li>qux</li>
      </ul>
    </li>
    <li>wib</li>
    <li>
      <p>
      wob
      </p>
      <ul>
        <li>wub</li>
      </ul>
    </li>
  </ul>
</body>

CSS

html, body {
  background: hsl(210, 20%, 20%);
  color: white;
  font-family: Avenir, sans-serif;
  font-weight: bold;
}

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  display: block;
}

li > p {
  display: inline-block;
  margin: 0;
}

li::before {
  display: inline-block;
  content: ' ';
  width: 20px;
  height: 100%;
  margin-right: 5px;
  vertical-align: middle;
  
  background:
    linear-gradient(to right, white 0px, transparent 1px),
    linear-gradient(to top, white 0px, transparent 1px);
  background-position: 10px 0, 10px -10px;
  background-repeat: no-repeat, no-repeat;
}

li:last-child::before {
  background:
    linear-gradient(to right, white 0px, transparent 1px),
    linear-gradient(to top, white 0px, transparent 1px);
  background-position: 10px -10px, 10px -10px;
  background-repeat: no-repeat, no-repeat;
}