使用CSS flex，如何在标题之后到行尾之间获得一行（如hr元素）

Question

I want to add something that look like a line after my title to the end of the line:

 .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> 

In my 3rd example, I have added div.hr .

Using flexbox , is it possible to:

1. Make it displayed after the title
2. Positioned on the first title line
3. Later, I will also need to achieve the same, but from the beginning of the line to the title (for right aligned text).

Answer 1

Set the heading to display: flex , align-items: baseline to make horizontal line and text in the same line. Then put the title text into <span> and add div .hr with flex: 1 to make its width grow to full. Take a look at demo:

 .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> 

Answer 2

Here's how you can achieve this effect, regardless of Bootstrap:

 .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> 

Can be used with any not empty element ).

Grows to parent width or to max-width value.

SCSS version, allowing setting color, stroke, padding and selector:

$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;
  }
}

fiddle .