CSS UL LI TRAIL

ul-li-with-trail-demo.md

See live demo here: https://codepen.io/lorobi/pen/XJdoQPP Other solutions: https://stackoverflow.com/questions/11167628/trees-in-twitter-bootstrap/11170897#11170897

• 1
  • 1.1
  • 1.2
    • 1.2.1
    • 1.2.2
      • 1.2.2.1
      • 1.2.2.2
    • 1.2.3
    • 1.2.4
      • 1.2.4.1
      • 1.2.4.2
• 2
  • 2.1
  • 2.2
    • 2.2.1
    • 2.2.2
      • 2.2.2.1
      • 2.2.2.2
    • 2.2.3
    • 2.2.4
  • 2.3
• 3

<ul>
  <li><strong>1</strong>
    <ul>
      <li><strong>1.1</strong></li>
      <li><strong>1.2</strong>
        <ul>
          <li><strong>1.2.1</strong></li>
          <li><strong>1.2.2</strong>
            <ul>
              <li><strong>1.2.2.1</strong></li>
              <li><strong>1.2.2.2</strong></li>
            </ul>
          </li>
          <li><strong>1.2.3</strong></li>
          <li><strong>1.2.4</strong>
            <ul>
              <li><strong>1.2.4.1</strong></li>
              <li><strong>1.2.4.2</strong></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><strong>2</strong>
    <ul>
      <li><strong>2.1</strong></li>
      <li><strong>2.2</strong>
        <ul>
          <li><strong>2.2.1</strong></li>
          <li><strong>2.2.2</strong>
            <ul>
              <li><strong>2.2.2.1</strong></li>
              <li><strong>2.2.2.2</strong></li>
            </ul>
          </li>
          <li><strong>2.2.3</strong></li>
          <li><strong>2.2.4</strong></li>
        </ul>
      </li>
      <li><strong>2.3</strong></li>
    </ul>
  </li>
  <li><strong>3</strong></li>
</ul>

:root {
  --tree-item-height: 32px;
  --tree-item-half-height: calc(var(--tree-item-height)/2);
  --tree-next-level: 0;
  --tree-level: 0;
  --tree-indent: 16px;
  --tree-trail-width: 20px;
}

/* RESET*/
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
body {
  padding: 20px;
}
/*
 * Indentation
*/
ul {
  --tree-level: var(--tree-next-level)
}
li {
  --tree-next-level: calc(var(--tree-level) + 1);
  --tree-item-indent: calc(var(--tree-level) * var(--tree-indent) ); 
}
ul, li {
  position: relative;
}
strong {
  display: flex;
  height: var(--tree-item-height);
  padding-left: var(--tree-item-indent);
  align-items: center;
}

/*
* TRAILS
*/

ul li::before{
  content: "";
  position: absolute;
  border-bottom: 1px solid red;
  width: var(--tree-trail-width);
  transform: translateX(calc(var(--tree-trail-width) * -1));
  inset-inline-start: var(--tree-item-indent);
  height: var(--tree-item-half-height);
}
ul li:last-child::before{
    border-inline-start: 1px solid green;
    border-end-start-radius: 4px;
}
ul li:not(:last-child)::after{
  content: '';
  position: absolute;
  border-inline-start: 1px solid pink;
  inset-inline-start:calc( var(--tree-item-indent) - var(--tree-trail-width));
  top: 0;
  bottom: 0;
}
ul li:first-child::after{
  top: var(--tree-item-half-height);
}
ul ul li:first-child::after{
  top: calc(var(--tree-item-half-height) * -1);
}