html - 文本一侧的 CSS 水平线

Question

我想在文本左侧创建水平线。我有这样的想法，但它在两侧都形成了线条，但我只想在一侧 - 左侧或右侧。我该怎么做？

h2 {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
  margin: 10px 0 20px;
}

h2 span {
  background: #fff;
  padding: 0 10px;
}

演示:http://jsfiddle.net/7jGHS/

Answer 1

在您当前的 HTML 结构中，您可以使用 Flexbox 和 :after, :before 伪元素来做到这一点。

h2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
h2 span {
  background: #fff;
  margin: 0 15px;
}
h2:before,
h2:after {
  background: black;
  height: 2px;
  flex: 1;
  content: '';
}
h2.left:after {
  background: none;
}
h2.right:before {
  background: none;
}

<h2 class="left"><span>THIS IS A TEST</span></h2>
<h2 class="right"><span>LOREM</span></h2>
<p>this is some content</p>