Как сверстать блок с такой же линией?

Для того чтобы сверстать блок с такой же линией, вы можете использовать свойства CSS, такие как border, background и position.

Вот пример кода на HTML и CSS, который поможет вам достичь желаемого результата:

HTML:

<div class="line-container">
  <div class="line"></div>
  <div class="content">
    <!-- Содержимое блока -->
  </div>
</div>

CSS:

.line-container {
  position: relative;
}

.line {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.content {
  /* Стили для блока с содержимым */
  /* Например, padding, цвет фона и т.д. */
}

В данном коде мы создаем контейнер .line-container, в котором находится два дочерних элемента: .line, который представляет собой горизонтальную линию, и .content, который содержит ваше содержимое блока.

У .line-container задано position: relative, чтобы его дочерние элементы .line и .content могли использовать позиционирование относительно него.

.line имеет position: absolute, чтобы мы могли позиционировать его относительно родительского .line-container. Мы задаем top: 50%, чтобы линия была посередине относительно контейнера. Затем используем width: 100% и height: 1px, чтобы создать горизонтальную линию. Вы можете изменить цвет линии, изменить ее высоту или добавить другие стили согласно вашим потребностям.

.content - это блок с вашим содержимым. Вы можете добавить дополнительные стили, такие как background-color, padding, margin и так далее для настройки его внешнего вида.

Если вы хотите, чтобы линия была относительно ширины содержимого, вы можете поместить .line внутри .content и использовать отрицательное значение отступа (margin) для .line, чтобы сместить его назад за пределы контента.

Вот пример с использованием этого подхода:

HTML:

<div class="content">
  <div class="line"></div>
  <!-- Содержимое блока -->
</div>

CSS:

.content {
  position: relative;
  padding-bottom: 10px; /* дополнительный отступ для линии */
}

.line {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  margin-bottom: -10px; /* отрицательное значение отступа */
}

В данном примере мы добавили отрицательный отступ (margin-bottom: -10px) для .line, чтобы сместить его назад за пределы .content, создавая таким образом эффект линии под содержимым блока.

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