文字一侧的CSS水平线

本文介绍了文字一侧的CSS水平线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在文本左侧创建水平线.我有这样的想法，但它在两边都创建线，但我只想在一侧-左或右.我该怎么办?

I want to create horizontal line on left side of my text. I have somethink like this, but it's creating line on both sides but I want only on one side - left or right. How can I do this?

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/

推荐答案

在当前的HTML结构中，您可以使用Flexbox和:after和:before伪元素来完成此操作.

With your current HTML structure you can use Flexbox and :after, :before pseudo elements to do this.

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>

这篇关于文字一侧的CSS水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！