Creating a git commits graph style list with CSS/JS

Question

What I have so far

How can I achieve a list with HTML, CSS, and JavaScript that would look something like:

I know that I can use list-style-image for custom images, so I can achieve blue dots, I could create empty first and last item and move them to the left as well, the only thing I ponder is how to connect the dots (quite literally). :)
Thank you for your time.

Answer 1

I guess there are several ways to accomplish this. This is my way, and to do this, is to make great benefit of the :before and :after of elements. I added another <ul> inside the main <ul> to get the subitems.

This is just a quick setup, but play along and alter the code to your needs.

ul {
  margin-left: 10px;
  list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Small-dark-green-circle.svg/16px-Small-dark-green-circle.svg.png');
}

.outer-list {
  position: relative;
}

.outer-list:after {
  position: absolute;
  height: calc(100% - 45px);
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  left: 25px;
  top: 20px;
}

ul li {
  padding: 5px 0;
}

.inner-list {
  margin-left: 0;
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
}

.inner-list:before {
  position: absolute;
  height: 40px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  transform: rotate(-45deg);
  left: 4px;
  bottom: 100%;
  margin-bottom: -15px;
}

.inner-list:after {
  position: absolute;
  height: 40px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  transform: rotate(45deg);
  left: 5px;
  top: 100%;
  margin-top: -15px;
}

.inner-list li {
  position: relative;
}

.inner-list li:after {
  position: absolute;
  height: 15px;
  width: 1px;
  content: '';
  display: block;
  background-color: black;
  left: -15px;
  top: 20px;
}

.inner-list li:last-child:after {
  display: none;
}

<ul class="outer-list">
  <li>&nbsp;
    <ul class="inner-list">
      <li>Item 1</li>
      <li>Item 1</li>
      <li>Item 1</li>
      <li>Item 1</li>
    </ul>
  </li>
  <li></li>
</ul>