CSS 图像标题前后的行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23584120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line before and after title over image
提问by JUO
I want to create a line before and after a centered title. The line and text must have a transparent backgroundto be able to position them on a uneven background. The line must not be 100% width, like this:
我想在居中的 title 前后创建一条线。线条和文本必须具有透明背景才能将它们放置在不均匀的背景上。该行不能为 100% 宽度，如下所示：
The text of the title can change:
标题的文本可以更改：
- Width of title isn't known
- The title can span on several lines
- 标题宽度未知
- 标题可以跨越多行
h1 {
text-align: center;
border-bottom: 1px solid #000;
}<h1>Today</h1>回答by web-tiki
You can make a line on both sides of the titlewith 2 pseudo elements and borders:
您可以在标题的两侧用 2 个伪元素和边框制作一行：
- This works over a transparent background(lines and title have transparent backgrounds).
- The line length will adapt to the title width so they alway start and end at the same position regardless to title length.
- The title can span on several lineswhile the left and right lines stay verticaly centered (Note that you need to wrap the title in a
<span>tag for this to work. See demo)
- 这适用于透明背景（线条和标题具有透明背景）。
- 行长度将适应标题宽度，因此无论标题长度如何，它们始终在同一位置开始和结束。
- 标题可以跨越多行，而左右线保持垂直居中（请注意，您需要将标题包装在
<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>回答by Harry
Here is another approach by using flexbox display. The flex-growproperty specifies how the free space should be distributed among the elements when their total size is smaller than container size.
这是使用 flexbox 显示的另一种方法。该flex-grow属性指定当元素的总大小小于容器大小时如何在元素之间分配可用空间。
By default no widthis specified on the elements that produce the lines and they have no content(meaning they are basically empty and take up no space). However, the flex-growsetting on these elements would make the leftover space (total space of the container - space of the text) get equally distributed among them. This makes it look as though the line runs from end to the other except for where the text is.
默认情况下width，在生成行的元素上指定no并且它们没有content（意味着它们基本上是空的并且不占用空间）。但是，flex-grow对这些元素的设置会使剩余空间（容器的总空间 - 文本的空间）在它们之间平均分配。这使它看起来好像除了文本所在的位置之外，该行从一端延伸到另一端。
Solid line on either side of content:
内容两侧的实线：
In the below snippet, a top to bottom gradient is used to produce the effect of having a solid line on either side of the content.
在下面的片段中，使用从上到下的渐变来产生在内容的任一侧都有一条实线的效果。
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="https://cdnjs.cloudflare.com/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>
Line with Gradient Effect on either side of content:
内容两侧带有渐变效果的线条：
In the below snippet, a thin left to right gradient is used to produce the effect of a line which goes from a solid color near the content to transparent on the other side.
在下面的代码片段中，从左到右的细渐变用于产生一条线的效果，该线从内容附近的纯色变为另一侧的透明。
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-size: 100% 2px;
background-position: 0% 50%;
background-repeat: repeat-x;
}
.heading:before, .heading-ie span.before{
background-image: linear-gradient(to right, transparent, white);
}
.heading:after, .heading-ie span.after{
background-image: linear-gradient(to left, transparent, white);
}
/* Just for demo*/
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}<script src="https://cdnjs.cloudflare.com/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>
Note:In the snippet I have used an extra spanelements for the lines because IE11 doesn't seem to support flex-growon pseudo-elements. Otherwise, the same can be achieved with a pseudo-element also.
注意：在代码片段中，我span为这些行使用了一个额外的元素，因为 IE11 似乎不支持flex-grow伪元素。否则，也可以使用伪元素实现相同的效果。
Drawbackof this approach is the browser support for this feature, which is pretty low at the moment. You may also have to adopt some browser specific customizations that are detailed in my answer herewhich is similar to this.
这种方法的缺点是浏览器对此功能的支持，目前还很低。您可能还需要采用一些浏览器特定的自定义设置，这些自定义设置在我的答案中详述，与此类似。
At present this doesn't give anything extra over web-tiki's answer but is just another possible option. This approach would be more helpful in cases like the below:
目前，这并没有比 web-tiki 的答案提供任何额外的东西，而只是另一种可能的选择。这种方法在以下情况下会更有帮助：
h3{
display: flex;
flex: 1;
width: 70%;
margin: 20px auto;
line-height: 1em;
}
.heading-ie .start, .heading-ie .middle, .heading-ie .end{
content: '';
flex-grow: 1;
margin: 0px 4px;
background: linear-gradient(to right, white, white);
background-position: 0% 50%;
background-size: 100% 2px;
background-repeat: repeat-x;
}
/* Order specifies the order in which the elements should be presen within container */
.content-1{
order: 2;
}
.start{
order: 1;
}
.middle{
order: 3;
}
.content-2{
order: 4;
}
.end{
order: 5;
}
/* Just for demo*/
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading-ie'>
<span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
<span class='content-1'>Text here</span>
<span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
<span class='content-2'>and here too</span>
<span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>
<h3 class='heading-ie'>
<span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
<span class='content-1'>Text with <br/> line break</span>
<span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
<span class='content-2'>and here with <br/> line break too</span>
<span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>
