Как сделать такую стрелку при ответе на комментарий на CSS?

Question

[Stacy None]

На картинке под аватаркой идет стрелка или линия. Подскажите пожалуйста как такую сделать?
У меня bootstrap 4 часа 2 пытаюсь, никак не получается)
Заранее спасибо!

Comments

[Марат Мхитарян]

Откройте Chrome Dev tools, и посмотрите

[Антон Спирин]

Можно сделать абсолютным блоком с двумя видимыми границами и таким псевдоэлементом :after или :before. Высота у него должна быть 100% верхнего блока за вычетом половины высоты аватара и позиция top равная высоте аватара + нижний отступ. left половина ширины аватара. Естественно блок с аватаром и сообщением должен иметь position: relative. Это все.

Answer 1

[Евгений]

https://codepen.io/3lvcz/pen/PROdXx

Comments

[JackShcherbakov]

Коментарии могут иметь разную высоту. Соответственно, Ваш вариант не подходит из-за отсутствия гибкости.

[Stacy None]

Огромное спасибо! Но как сделать так чтобы когда ответа не было, стрелка вниз не появлялась? В единичном комментарии

[Евгений]

JackShcherbakov, реализация получилась не гибкая (например, не предусмотрена дополнительная вложенность и больше одного комментария), хотя разная высота тут верстку не сломает и все отработает как надо. Вопрос автора был не о том, как сделать всю ленту комментариев, а каким принципом делать стрелку версткой.

[Евгений]

Stacy None, это в зависимости от конечной реализации, разумеется.. Не факт, что в боевом варианте комментарии и ответы в верстке будут на одном уровне (как в моем примере). Но если брать опять же мой пример, то я бы переименовл класс .message_question в .message_with-answers и добавлял только в том случае, если у коммента есть ответ.

[Stacy None]

Евгений, Спасибо, сделал через js)

[frees2]

JackShcherbakov,

body {
    width: 40%;

Только боди на див какой нибудь лучше заменить