Регулировка высоты границы элемента с помощью CSS

Question

I; m пытается достичь следующего с помощью CSS:

Эти строки связаны с каждым контейнером div внутри родительского div-

HTML:

<div class="parent">
  <div class="dynamic">
    some content some content some content
    some content some contentsome content
    some content some content some content
  </div>
  <div class="dynamic">
    other some content other some content other some content
     othersome content other some contentsome content
    other some content other some content some content
  </div>
  <div class="child3">
    Add more content
  </div>
</div>

CSS:

.parent {
  border-left: 1px solid #ff0000;
}
.dynamic .child3 {

  margin-left: 20px;
  background: #e9e9e9;
  margin-bottom: 10px;
  padding: 10px;
}

это то, что у меня есть на данный момент: https://jsfiddle.net/z6nget91/
однако я застрял в том, как добавить строки, чтобы соединить их с каждым контейнером? Любые идеи?? Спасибо

Answer 1

Вы можете использовать ::before псевдоэлемент дочерних элементов, чтобы добиться этого. Начать можно примерно так:

.parent {
  border-left: 1px solid #ff0000;
}

.child {
  position: relative;
  margin-left: 20px;
  background: #e9e9e9;
  margin-bottom: 10px;
  padding: 10px;
}

.child::before {
  position: absolute;
  content: '';
  left: -20px;
  top: 50%;
  border-top: 1px solid #ff0000;
  width: 20px;
}

.child:last-child::after {
  position: absolute;
  content: '';
  left: -21px;
  top: calc(50% + 1px);
  bottom: 0;
  border-left: 1px solid #FFFFFF;
}

<div class="parent">
  <div class="child">
    some content some content some content
    some content some contentsome content
    some content some content some content
  </div>
  <div class="child">
    other some content other some content other some content
     othersome content other some contentsome content
    other some content other some content some content
  </div>
  <div class="child">
    Add more content
  </div>
</div>