Используя CSS flex, как я могу получить строку (например, элемент hr), начинающуюся после заголовка до конца строки?

Question

Я хочу добавить что-то похожее на строку после моего заголовка в конце строки:

.d-flex {
  display: flex;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: white;
}

.d-flex h2.text-primary {
 background: blue;
 flex: 0 0 3rem;
}

.d-flex h2:not(.text-primary) {
  background: red;
  flex: 1;
}

.hr {
  height: 2px;
  background: cyan;
}

<b>This is aligned left</b>

<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <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</P>
  </div>
</div>

<b>This is aligned right</b>

<div class="d-flex">
  <H2 class="text-primary">2&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <P class="text-right">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</P>
  </div>
</div>

<b>This should have a "hr" <u>after</u> the title to the end of the line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <div class="hr"></div>
    <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</P>
  </div>
</div>


<b>This should have a "hr" <u>before</u> the title to the beggining of the title line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <div class="hr"></div>
    <P class="text-right">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</P>
  </div>
</div>

В третьем примере я добавил div.hr.

Используя flexbox , возможно ли:

1. Сделать так, чтобы он отображался после заголовка
2. Расположен в первой строке заголовка
3. Позже мне тоже нужно будет добиться того же, но с началастрока заголовка (для выровненного по правому краю текста).

Answer 1

Вот как вы можете добиться этого эффекта независимо от начальной загрузки:

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}
.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 1px solid #ccc;
  margin: 0 1rem;
}
.divider:before {
  margin-left: 0;
}
.divider:after {
  margin-right: 0;
}
.divider[data-position="right"]:after,
.divider[data-position="left"]:before {
  content: none;
}

<h2 class="divider" data-position="left">Divider</h2>
<span class="divider">Divider</span>
<div class="divider" data-position="right">Divider</div>

Может использоваться с любым не пустой элемент ).

Увеличивается до родительской ширины или до значения max-width.

Версия SCSS, позволяющая установить цвет, обводку, отступы и селектор:

$divider-selector: ".divider";
$divider-line-color: #ccc;
$divider-padding: 1rem;
$divider-stroke: 1em;

#{$divider-selector} {
  display: flex;
  align-items: center;
  padding: 0 $divider-padding;
  &:before,
  &:after {
    content: '';
    flex: 0 1 100%;
    border-bottom: $divider-stroke solid $divider-line-color;
    margin: 0 $divider-padding;
    transform: translateY(#{$divider-stroke} / 2)
  }
  &:before {
    margin-left: 0;
  }
  &:after {
    margin-right: 0;
  }
  &[data-position="right"]:after,
  &[data-position="left"]:before {
    content: none;
  }
}

скрипка .

Answer 2

Установите заголовок на display: flex, align-items: baseline, чтобы сделать горизонтальную линию и текст одной строкой.Затем поместите текст заголовка в <span> и добавьте div .hr с flex: 1, чтобы увеличить его ширину.Взгляните на демо:

.d-flex {
  display: flex;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: white;
}

.d-flex h2.text-primary {
 background: blue;
 flex: 0 0 3rem;
}

.d-flex h2:not(.text-primary) {
  background: red;
  flex: 1;
}

.hr-baseline {
  display: flex;
  align-items: baseline;
}

.hr {
  height: 2px;
  background: cyan;
  flex: 1;
}

<b>This is aligned left</b>

<div class="d-flex">
  <H2 class="text-primary">1&nbsp;/&nbsp;</H2>
  <div>
    <H2>Hello World</H2>
    <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</P>
  </div>
</div>

<b>This is aligned right</b>

<div class="d-flex">
  <H2 class="text-primary">2&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right">Hello World</H2>
    <P class="text-right">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</P>
  </div>
</div>

<b>This should have a "hr" <u>after</u> the title to the end of the line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="hr-baseline"><span>Hello World</span><div class="hr"></div></H2>
    <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</P>
  </div>
</div>


<b>This should have a "hr" <u>before</u> the title to the beggining of the title line</b>

<div class="d-flex">
  <H2 class="text-primary">3&nbsp;/&nbsp;</H2>
  <div>
    <H2 class="text-right hr-baseline"><div class="hr"></div><span>Hello World</span></H2>
    <P class="text-right">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</P>
  </div>
</div>