Сплошные строки по сторонам содержимого

by akogch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h3 class='heading-ie'>
  <span class='start'></span>
  <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text here</span>
  <span class='middle'></span>
  <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here too</span>
  <span class='end'></span>
  <!-- IE11 supports flex-grow only on actual elements -->
</h3>

<h3 class='heading-ie'>
  <span class='start'></span>
  <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text with <br/> line break</span>
  <span class='middle'></span>
  <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here with <br/> line break too</span>
  <span class='end'></span>
  <!-- IE11 supports flex-grow only on actual elements -->
</h3>

CSS

h3 {
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}

.heading-ie .start,
.heading-ie .middle,
.heading-ie .end {
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}

/* Order specifies the order in which the elements should be presen within container */

.content-1 {
  order: 2;
}

.start {
  order: 1;
}

.middle {
  order: 3;
}

.content-2 {
  order: 4;
}

.end {
  order: 5;
}

/* Just for demo*/

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}