Как сделать боковые линии от текста в css?

body{ 
  background-color:#5c5c5c; 
} 
.line{ 
  text-align:center; 
  border-bottom:1px solid #fff; 
} 
.bold_line{ 
  display:inline-block; 
  text-align:center; 
  padding:0 50px; 
  border-bottom:3px solid #fff; 
  margin-bottom:-2px; 
} 
.text{ 
  font-size:24px; 
  display:inline-block; 
  padding:0 5px 5px; 
  margin-bottom: -12px; 
  color:#fff; 
  background-color:#5c5c5c; 
}

<div class="line"> 
  <div class="bold_line"> 
    <div class="text">OUR SERVICES</div> 
  </div> 
</div>

html, body { height: 100%, margin: 0; padding: 0; } 
 
div { 
  display: flex; flex-flow: row nowrap; 
  justify-content: center; 
  padding: 2rem 1rem; 
  font: 300 1.6rem sans-serif; color: #f6f6f6; 
  text-transform: uppercase; 
  text-align: center; 
  border-bottom: 1px solid #fff; 
  background: #373737; 
} 
 
div::before, 
div::after { 
  content: ''; 
  display: inline-block; 
  flex: 1 0 auto; align-self: flex-end; 
  height: 3px; 
  margin: 0 0.3em 0.25em 0.3em; 
  background: 100% center / 1.8em 2.75px no-repeat linear-gradient(to right, #f6f6f6 0%, #f6f6f6 100%), 
              100% center / 1px 1px repeat-x linear-gradient(to right, #f6f6f6 0%, #f6f6f6 100%); 
  box-shadow: inset 0 0 1px 1px #37373740; 
} 
 
div::after { background-position: 0% center; }

<div>Our services</div>

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background-color: #212121; 
  color: white; 
} 
 
div { 
  width: 70%; 
  display: flex; 
} 
 
div::before, 
div::after { 
  content: ''; 
  display: block; 
  flex-grow: 1; 
  height: inherit; 
  border-bottom: 1px solid white; 
} 
 
span { 
  display: flex; 
  justify-content: space-around; 
  align-items: flex-end; 
  line-height: 0.8; 
  font-size: 1.5rem; 
} 
 
span::before, 
span::after { 
  content: ''; 
  display: block; 
  width: 50px; 
  height: 2px; 
  background-color: white; 
  transform: translateY(25%); 
  border-radius: 0.3rem; 
} 
 
span::before { 
  margin-right: 0.4rem; 
} 
 
span::after { 
  margin-left: 0.4rem; 
}

<div><span>OUR SERVICES</span></div>