Граница css вокруг li, но не инкапсулирует подсписки

Question

Я хочу окружить многострочный текст li рамкой.

Я тоже хочу:
1) Сделать рамку только вокруг каждого элемента, как это делается для элемента Root
[Решено!] 2) Сделать границу остановки, где текст останавливается, не растягивая в сторону
3) Добавьте интервал между границами каждого элемента.

Иллюстрация: https://i.imgur.com/o6jd4rK.png

HTML:

<ul>
  <li class="root">
    Root
  </li>
  <li>
              Lorem ipsum<br>dapibus neque<br>Tincidunt mauris
        <ul>
          <li>Adipiscing elit.</li>
          <li>Tincidunt mauris eu risus.</li>
          <li>Vestibulum </li>
        </ul>
  </li>
  <li>Aliquam</li>
  <li>
    Dapibus
    <ul>
      <li>Aliquam tincidunt mauris eu risus.</li>
      <li>Vestibulum auctor dapibus neque.</li>
    </ul>
  </li>
</ul>

SCSS:

$maincolor: #F76464;

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 50px;
}

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2em;

  li {
    font-size: 16px;
    position: relative;
    border: 1px solid $maincolor;

    &::before {
      position: absolute;
      left: -15px;
      top: 0px;
      content: '';
      display: block;
      border-left: 1px solid $maincolor;
      height: 1em;
      border-bottom: 1px solid $maincolor;
      width: 10px;
    }

    &::after {
      position: absolute;
      left: -15px;
      bottom: -7px;
      content: '';
      display: block;
      border-left: 1px solid $maincolor;
      height: 100%;
    }

    &.root {
      margin: 0px 0px 0px -20px;

      &::before {
        display: none;
      }

      &::after {
        display: none;
      }
    }

    &:last-child {
      &::after {
        display: none;
      }
    }
  }
}

Скрипка: https://jsfiddle.net/aky4hwtn/31/

Пока я пытался использовать разные типы отображения, отступы, инкапсуляцию текста с тегом div и т. Д., Но без особого успеха.

Answer 1

Я исправил ваши 3 проблемы следующим образом:

1. Оберните только текст, а не какие-либо подсписки, с <div class="node">{text}</div>.Класс node применяет границу и, поскольку он только оборачивает текст, а не подсписки, граница только обходит узел.Чтобы это выглядело хорошо, я добавил немного padding.
2. . В новой обертке <div class="node"> s будет использоваться полная ширина, поэтому display: inline-block применяется к классу node только с использованием пробела
3. Класс node имеет margin-bottom, чтобы получить место ниже.Чтобы учесть это, размер элементов before / after должен был измениться.

Я исключил корень из списка, потому что в противном случае для корня было бы <li>есть подсписок со всем остальным, что не имеет особого смысла для меня.

До и после все еще немного пересекаются, возможно, это можно улучшить с помощью более точной настройки размера, но все выглядит хорошо сданный пример.

* {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 50px;
  font-size: 16px;
}

ul {
  margin: 0px 0px 0px 20px;
  list-style: none;
  line-height: 2;
}

li {
  position: relative;
}

li::after {
  position: absolute;
  left: -10px;
  bottom: -7px;
  content: '';
  display: block;
  border-left: 1px solid red;
  height: 100%;
}

li::before {
  position: absolute;
  left: -10px;
  top: -10px;
  content: '';
  display: block;
  border-left: 1px solid red;
  height: 32px;
  border-bottom: 1px solid red;
  width: 10px;
}

li:last-child::after {
  display: none;
}

.node {
  display: inline-block;
  border: 1px solid red;
  padding: 5px;
  margin-bottom: 10px;
}

<div class="node">
  Root
</div>
<ul>
  <li>
    <div class="node">Lorem ipsum<br>dapibus neque<br>Tincidunt mauris</div>
    <ul>
      <li>
        <div class="node">Adipiscing elit.</div>
      </li>
      <li>
        <div class="node">Tincidunt mauris eu risus.</div>
      </li>
      <li>
        <div class="node">Vestibulum</div>
      </li>
    </ul>
  </li>
  <li>
    <div class="node">Aliquam</div>
  </li>
  <li>
    <div class="node">Dapibus</div>
    <ul>
      <li>
        <div class="node">Aliquam tincidunt mauris eu risus.</div>
      </li>
      <li>
        <div class="node">Vestibulum auctor dapibus neque.</div>
      </li>
    </ul>
  </li>
</ul>