标题之前和之后的图像

我想在中心标题之前和之后创build一行 。 该行和文本必须具有透明背景 ，才能将其放置在不平坦的背景上。 该行不能是100％的宽度，如下所示：

标题的文字可能会改变：

• 标题宽度未知
• 标题可以跨越几行

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

 <h1>Today</h1> 

Answer 1

你可以用两个伪元素和边框在标题的两边划一条线 ：

• 这在透明背景上工作 （线条和标题具有透明的背景）。
• 线的长度将适应标题的宽度，所以他们始终在相同的位置开始和结束，无论标题长度。
• 标题可以跨越几行 ，左边和右边的行保持垂直居中（ 请注意，您需要将标题封装在<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> 

Answer 2

这是另一种使用柔性显示器的方法。 flex-grow属性指定自由空间在其总大小小于容器大小时应如何在元素之间分配。

默认情况下，在生成行的元素上没有指定width ，也没有content （这意味着它们基本上是空的，不占用空间）。 然而，这些元素的flex-grow设置会使剩余空间（文本的容器空间的总空间）得到平均分配。 这使得看起来好像这条线从头到尾运行，除了文本的位置。

内容两侧的实线：

在下面的代码片段中，使用从顶部到底部的渐变来产生在内容的任一侧上具有实线的效果。

 h3{ display: flex; flex: 1; width: 70%; margin: 20px auto; line-height: 1em; } .heading:before, .heading:after, .heading-ie span.after, .heading-ie span.before{ content: ''; flex-grow: 1; margin: 0px 4px; background: linear-gradient(to right, white, white); background-size: 100% 2px; background-position: 0% 50%; background-repeat: repeat-x; } /* Just for demo*/ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <script src="ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <h3 class='heading'>Something broader</h3> <h3 class='heading'>Something broader and broader</h3> <h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3> <!-- IE11 specific version --> <h3 class='heading-ie'> <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements --> Something broader and broader and broader <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements --> </h3>