用填充和替代颜色添加上划线和下划线

Question

正如标题所述，我正在寻找有关在标题文本顶部添加颜色与文本不同的行的帮助。我尝试在类中使用上划线和下划线添加填充，边距和颜色，但没有任何效果。这是我的HTML和CSS：

.lines {
   text-decoration-line: overline underline;
   margin: 20px;
}

<div class="row">
   <div class="col-md-7 justify_text">
      <h2 class="lines">WHO WE ARE</h2>
      <div class="col-md-5">
         <img src="img/pic2.jpg" class="img-responsive">
      </div>
   </div>
</div>

这是我想展示的效果：

Answer 1

您可以使用:after和:before伪元素添加行。这是一个示例：

.lines {
  position: relative;
  padding: 10px 0;
}

.lines:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: red;
}

.lines:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: blue;
}

<div class="row">
  <div class="col-md-7 justify_text">
    <h2 class="lines">WHO WE ARE</h2>
    <div class="col-md-5">
      <img src="img/pic2.jpg" class="img-responsive">
    </div>
  </div>
</div>

希望它对您有帮助。

Answer 2

另一种实现方法是使用border属性：

h2 {
  display: inline-block;
  border-top: 2px solid green;
  border-bottom: 2px solid orange;
  padding-top: 10px;
  padding-bottom: 10px;
}

<h2>WHO WE ARE</h2>

Answer 3

另一个带有渐变的想法，您将拥有更大的灵活性来控制颜色和大小：

.lines {
  position: relative;
  padding: 10px 0;
  display:inline-block;
  background:
    linear-gradient(red,red)  top center/100% 2px,
    linear-gradient(blue,blue) bottom center/80% 2px;
  background-repeat:no-repeat;
}

<h2 class="lines">WHO WE ARE</h2>