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

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>

这是我要展示的效果：

标签： htmlcss

Answer 1

另一种方法是使用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>