css – 线前后的图片标题

我想在中心标题之前和之后创建一行。线条和文字必须具有透明背景才能将其放置在不均匀的背景上。该行不能为100％宽度，如下所示：

标题的文字可以改变：

标题的宽度是未知的
>标题可以跨越几行

h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}

<h1>Today</h1>

解决方法

您可以使用两个伪元素和边框在标题的两边做一行：

>这个工作在一个透明的背景(线条和标题有透明的背景)。
>线长度将适应标题宽度，因此无论标题长度如何，它们始终处于同一位置。
>标题可以跨越几行，而左和右线保持垂直居中(请注意，您需要将标题包含在< span>标签中才能工作。请参阅演示)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans',sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before,h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}

<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>

原文地址：https://www.jb51.cc/css/219832.html