Я хочу нарисовать вертикальную линию, как в твиттере

Question

Я создаю твиттер-клон, я хочу нарисовать вертикальную линию, подобную той, что показана в этом твиттере ссылка с центром между двумя изображениями и оказалась в двух отдельных <div>

Я пытался: <div class="vertical-line"></div> после изображения <div>

.vertical-line {
    border-width: 2px;
    border-top-left-radius: 2px;
    border-color: #1da1f2;
    border-style: solid;
}

и результат был this

Answer 1

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: flex;
  height: auto;
  overflow: hidden;
}

li:last-child .line {
  display: none;
}

.avatarWrap {
  display: flex;
  flex-direction: column;
  width: 28px;
}

.avatarWrap .circle {
  background-color: #ccc;
  border: 3px solid #fff;
  border-radius: 25px;
  display: block;
  flex-shrink: 0;
  position: relative;
  height: 22px;
  width: 22px;
}

.avatarWrap .line {
  background-color: #ccc;
  border-radius: 3px;
  content: '';
  display: block;
  flex: 1;
  height: 100%;  
  margin-left: 11px;
  width: 5px;
}

.content {
  font-size: 12px;
  margin: 8px 0 0 20px;
}

<ul>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
  <li>
    <div class="avatarWrap">
      <span class="circle"></span>
      <span class="line"></span>
    </div>
    <div class="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,
    </div>
  </li>
</ul>

Answer 2

Самый простой способ создать вертикальную линию, используя только CSS, это использовать border-left в пустом div с указанным height.Как упоминалось в комментариях, tkore вам нужно будет использовать JS, чтобы определить height класса .line в зависимости от расстояния между изображениями, поскольку у вас не будет задано это значение заранее, но остальная часть этого кода будет работатькак есть.

img {
    border-radius: 50%;
    margin: 5px;
}

.line {
    position: relative;
    bottom: 2px;
    left: 38px;
    border-left: 6px solid red;
    height: 85px;
}

<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">
<div class="line"></div>
<img src="https://pbs.twimg.com/profile_images/1113436678050316289/t-Agpngx_bigger.jpg">

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