Визуализировать дерево

Question

Есть у меня набор вложенных элементов. Мне нужно перед теми элементами, у которых нет детей поставить символ. А у тех, где детей нет, просто сместить вправо.

Делал так

div {
  margin-left: 20px;
}
div:before {
  content: '\2012';
}

div:not(div) {
  margin-left: 30px;
}

div:not(div):before {
  content: '';
}

<div>
  <span>1.1</span>
  <div>
    <span>2.1</span>
    <div>
      <span>3.1</span>
    </div>
  </div>
  <div>
    <span>2.2</span>
  </div>
</div>
<div>
  <span>1.2</span>
</div>

div:not(div) игнорируется

Пробовал инвертировать условие и вместо :not() использовать :has()

div:has(div) {
  margin-left: 20px;
}

div:has(> div):before {
  content: '\2012';
}

<div>
  <span>1.1</span>
  <div>
    <span>2.1</span>
    <div>
      <span>3.1</span>
    </div>
  </div>
  <div>
    <span>2.2</span>
  </div>
</div>
<div>
  <span>1.2</span>
</div>

Тоже все проигнорировалось

Answer 1

Обошел проблему, добавив в конечные узлы отдельный класс

div {
  margin-left: 20px;
}

div:before {
  content: '\2012';
}

div.end-item:before {
  content: '';
  margin-left: 1em;
}

<div>
  <span>1.1</span>
  <div>
    <span>2.1</span>
    <div class="end-item">
      <span>3.1</span>
    </div>
  </div>
  <div class="end-item">
    <span>2.2</span>
  </div>
</div>
<div class="end-item">
  <span>1.2</span>
</div>

БЛОГ НА HUSL

Визуализировать дерево

Ответы (1 шт):