Как уменьшать линию в зависимости от длины текста?

Question

[L1nw0od]

Добрый день, столкнулся вот с такой проблемой.
Есть заголовок и около него есть линия которая заполняет всю оставшуюся ширину, как сделать так чтоб когда в заголовке менялось количество знаков то длина линии рядом подстраивалась автоматически?

---

Comments

[Вадим]

А если текста настолько много, что переходит в 2 строки, что должно быть? Это Вам на подумать.

А так, display:flex, чем больше 1 элемент. тем меньше второй.

[L1nw0od]

Вадим, Об этом думал, текст на 2-ю строчку пере-ходить не будет.
---
Окей дисплей флэкс супер. а если это реализовывать не блоком а псевдоэлементом - или это не получится?

[drtvader]

У текста фон прописать и справа padding. Но выше вариант более актуальный как по мне.

[Ankhena]

L1nw0od, получится

[L1nw0od]

Ankhena, Могли бы подсказать как сделать?

[Ankhena]

L1nw0od, да точно также как и элементу, вообще нет разницы.

[L1nw0od]

Вадим, Могли бы подсказать как флэксом сделать (пример кода)
Перепробовал много вариантов - не получается ( не получается то как текст стает в 2 строки а должен быть в одну)

[L1nw0od]

Ankhena, делаю влэксами и вот такая штука получается

[Вадим]

L1nw0od,
Да нечего там показывать.

<div style="display:flex">
  <span style="flex-shrink: 0">
  <div class="line">

[L1nw0od]

Вадим, Не срабатывает(

<div style="display:flex">
  <span style="flex-shrink: 0"> wedwe
  </span>
<div class="line" style="
    background: red;
    display: block;
    height: 10px;
    /* width: 10px; */
">

  </div>
</div>

[Вадим]

L1nw0od, line width:100%

[L1nw0od]

Вадим, Разобрался, спасибо.

[L1nw0od]

Вадим, Скажите пожалуйста - а как сделать это псевдоэлементом чтоб не создавать лишние блоки?

[Denis]

<div class="line">ТЕКСТ КАКОЙ-ТО</div>

.line {
  display: flex;
  align-items: center;
}
.line::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  border-bottom: 1px solid #f00;
  margin-left: 20px;
}

[Вадим]

Denis,

<div class="line"><span>ТЕКСТ КАКОЙ-ТО</span></div>

.line {
  display: flex;
  align-items: center;
}

.line span {
  flex-shrink: 0;
}

.line::after {
  content: '';
  width: 100%;
  height: 2px;
  margin-left: 5px;
  background-color: red;
}

[Alex Karo]

L1nw0od,
> текст на 2-ю строчку пере-ходить не будет.
А на мобильном экране?

[L1nw0od]

Alex Karo, а на мобильном полоски не будет