Как сверстать такие сноски?

Question

[Изобретатель Дикпиков]

Подписи и линии к ним. Как сделать, чтоб более-менее адаптивно было.

Comments

[Антон Литвиненко]

Если это все вставить одной картинкой будет более менее адаптивно

[Изобретатель Дикпиков]

Антон Литвиненко, мне надо, чтобы текст был текстом.

[n1ksON]

Изобретатель Дикпиков, все вставьте картинкой, а текст сверху подпишите с флексом. В чём проблема-то?

Answer 1

[Arsenii]

Здесь уже не слишком адаптивно, так как не ясно как должны элементы размещаться потом при уменьшении экрана. Так как к примеру кабель уже вылазит за пределы блока и т.п.
Но в любом из вариантов поможет такая структура:

<div class="parent">
  <h3>Ноут</h3>
  <img>
</div>

Где у тебя будет .parent и img - position: relative; а h3 - position: absolute;
То есть нечто в таком роде:

.parent{
  position: relative;
  width: 200px;
  padding: 100px 0 0;
}
.parent img{
  position: relative;
  width: 200px;
  height: 100px;
 }
.parent h3{
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
 /* стили текста */
}
.parent h3:after{
/* Стили линии, ведущей к img */
}

И вот такие блоки уже перемещай как необходимо для адаптива.
Но сам блок не оч адаптивный.
Проще будет, если прямо так нужно - картинкой сделать и все) + у неё width: 100%; и она уже сама занимает ширину экрана, но это не ок решение, лучше заморочиться и сделать вариантов выше, но придется с адаптивом повозится.
Опять же - в зависимости от того, как это все должно выглядеть)