Как отверстать такой заголовок?
<div class="container">
  <h2>
    <span>О нас</span>
  </h2>
</div>.container {
  width: 700px;
  margin: auto;
}

h2 {
  text-align: center;
  position: relative;
}
h2:before {
  content: '';
  display: block;
  width: 75%;
  height: 1px;
  background: linear-gradient(90deg, red 70%, blue 70%);
  position: absolute;
  top: 7px;
  left: 0;
}
h2:after {
  content: '';
  display: block;
  width: 75%;
  height: 1px;
  position: absolute;
  background: linear-gradient(90deg, blue 30%, red 30%);
  right: 0;
  bottom: 7px;
}
h2 span {
  padding: 5px 40px;
  background: #fff;
  position: relative;
  z-index: 1;
}
codepen.io/Serj-One/pen/NNYMeE
как я понимаю тут по средине один див с бордер 0, потом 2 hr в теге спан и ниже тоже самое...