Как центрировать горизонтальную линию по вертикали до первой строки многострочного абзаца с помощью CSS?

Используйте половину высоты одной строки .5lh

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  font-size: 20px;
}

.container {
  display: flex;
  column-gap: 20px;
  align-items: flex-start;
}

.line {
  /* new code */
  margin-top: .5lh;
  translate: 0 -50%;
  /**/
  flex-shrink: 0;
  width: 50px;
  height: 2px;
  background-color: red;
}

p {
  margin: 0;
  margin-bottom: 20px;
}

<div class = "container">
  <div class = "line"></div>
  <div class = "text-container">
    <p class = "text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
    <p class = "text">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </p>
  </div>
</div>

Вы также можете упростить код, как показано ниже:

body {
  font-family: Arial, sans-serif;
  margin: 20px;
}
.text {
  padding-left: 70px;
}
.text:first-of-type {
  background:
    linear-gradient(red 0 0) no-repeat
    0 calc(.5lh - 1px)/50px 2px;
}
p {
  margin: 0 0 20px;
  font-size: 20px;
}

<p class = "text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<p class = "text">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>

Супер ленивый вариант — использовать просто псевдо-тире (/em-dash/three-em-dash) из того же шрифта. Теоретически такое тире должно определяться с учетом вертикального типографского баланса, обычно располагаться на середине высоты x или около него и естественным образом настраиваться с помощью преобразования на основе ex, если результат в конечном итоге окажется визуально неоптимальным при использовании в качестве « лидер». Все решение может представлять собой один элемент с одним псевдо:

p {
 display: flex;
 gap: 1ch;
 &::before {
  content: '⸻';
  color: mark;
  transform: translatey(-.1ex); /* Maybe? */
 }
}

html {
 color-scheme: light dark;
 font-size: 20px;
 font-family: system-ui;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Переведя его по вертикали на +.5ex, он должен поместиться рядом с базовой линией, -.5ex должен поместиться около высоты x. Скорее всего, это будет сильно зависеть от шрифта, но общее правило, согласно которому такое тире должно «хорошо выглядеть между обычными глифами», может установить предположение о том, что не должно быть слишком резких изменений вертикального положения относительно базовой линии между разными шрифтами.

В некоторых средах это решение может даже иметь некоторые незначительные преимущества по сравнению с фоновыми вариантами:

• «толщина» этой полосы должна соответствовать штрихам текста заданной толщины шрифта,
• будучи «настоящим» текстом, субпиксельное сглаживание с большей вероятностью улучшит рендеринг,
• поскольку он присутствует как гибкий элемент, он автоматически обрабатывает «собственный» размер. Это также может быть недостатком, в зависимости от ваших потребностей.

Кроме того, чтобы разместить вторую, третью и т. д. строку, можно добавить white-space: pre и поставить перед псевдоконтентом разрыв строки (\a). А замена планки каким-нибудь флёроновым орнаментом (например, ❧) должна быть интуитивно понятной.

Возможный недостаток заключается в том, что для шрифта, используемого для поддержки данного тире, очень важно; если тире будет выбрано из какого-то запасного шрифта, скорее всего, метрики будут неправильными.