Как заставить псевдоэлемент ::before, привязанный к .main__question_image автоматически продлеваться с добавлением каждого последующего элемента списка li.
body {
background-color:#f0f0f0;
color: grey;
}
img {
position: relative;
width: 50px;
height: 50px;
float: left;
}
span {
font-weight: bold;
}
li {
list-style-type: none;
margin-top: 10px;
margin-bottom: 20px;
}
p {
padding: 10px;
margin: 0;
}
.chat {
width: 50%;
margin:0 auto;
}
.main__question {
position: relative;
}
.main__question_image {
position: relative;
margin-left: -10px;
}
.main__question_image::before{
content: "";
border-left: 1px solid grey;
height: 410px;
position: absolute;
left:25px;
top: 0;
}
.main__question_text {
margin: 0 60px;
background-color: white;
border-radius: 5px;
border: 1px solid grey;
width:570px;
}
.border{
border:1px solid grey;
}
.main__answers_images {
margin: -2px 60px;
position:absolute;
}
.main__answers_text {
margin: 20px 130px;
background-color: white;
border-radius: 5px;
border: 1px solid grey;
position: relative;
width:500px;
height:auto;
}
.clear {
clear: left;
}
.main__answers_images::before {
content: "";
width: 40px;
height: 1px;
background-color: grey;
position: absolute;
left: -45px;
top: 26px;
}
.main__answers_images::after {
content: "";
position: absolute;
left: -7px;
top: 22px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px;
border-color: transparent transparent transparent grey;
}
<body>
<ul class="chat">
<li class="main__question">
<div class="main__question_image">
<img class="border" src='img/pika.png'>
</div>
<div class="main__question_text">
<p><span>Pikachu</span> спрашивает:</p>
<p>Почему во многих макетах и текстовых заданиях используется текст «Lorem ipsum dolor sit amet»???</p>
</div>
<div class="clear"></div>
</li>
<li class="main__answers">
<div class="main__answers_images">
<img class="border"src="img/cat.png">
</div>
<div class="main__answers_text">
<p><span>Kitty</span> отвечает:</p>
<p>Аннотация</p>
<p>Фраза «Lorem ipsum dolor sit amet consectetuer» впервые появилась в справке Microsoft Word. Фраза производит впечатление осмысленной латинской поговорки. На самом деле это не так.</p>
</div>
<div class="clear"></div>
</li>
<li class="main__answers">
<div class="main__answers_images">
<img class="border" src='img/monster.png'>
</div>
<div class="main__answers_text">
<p><span>Cookie Monster</span> отвечает:</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="clear"></div>
</li>
<li class="main__answers">
<div class="main__answers_images">
<img class="border" src='img/bob.png'>
</div>
<div class="main__answers_text">
<p><span>SpongeBob</span> отвечает:</p>
<p>Хотя фраза и бессмысленна, она имеет давнюю историю. Фраза использовалась печатниками многие столетия для демонстрации наиболее важных особенностей своих шрифтов. Она использовалась потому, чот символы составляют сложные по межсимвольным промежуткам и по комбинациям символов пары, наилучшим образом демонстрирующие преимущества данного начертания.</p>
</div>
<div class="clear"></div>
</li>
<div class="clear"></div>
</li>
</ul>
</body>