CSS 用css在文本后创建一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20935191/
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
Create line after text with css
提问by user3026212
Im trying to make a line after each of my h2 tags. I can′t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.
我试图在我的每个 h2 标签后划一条线。我不知道我应该如何告诉宽度，因为 h2 标题的长度从 h2 到 h2 不同。
I use the :after method to create lines
我使用 :after 方法来创建线条
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
Check code here: http://jsfiddle.net/s9gHf/As you can see the line get too wide, and make the website too wide.
在此处检查代码：http: //jsfiddle.net/s9gHf/正如您所看到的，该行变得太宽，并使网站变得太宽。
回答by myajouri
You could achieve this with an extra <span>:
您可以通过额外的方式实现这一点<span>：
HTML
HTML
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
CSS
CSS
h2 {
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content:"";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
http://jsfiddle.net/myajouri/pkm5r/
http://jsfiddle.net/myajouri/pkm5r/
Another solution without the extra <span>but requires an overflow: hiddenon the <h2>:
没有额外的另一种解决方案<span>，但需要overflow: hidden在<h2>：
h2 {
overflow: hidden;
}
h2:after {
content:"";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
回答by sangress
using flexbox:
使用弹性盒：
h2 {
display: flex;
align-items: center;
}
h2 span {
content:"";
flex: 1 1 auto;
border-top: 1px solid #000;
}
html:
html：
<h2>Title <span></span></h2>
回答by Baleb
Here is another, in my opinion even simpler solution using a flex wrapper:
这是另一个，在我看来，使用 flex 包装器的更简单的解决方案：
HTML:
HTML：
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
CSS:
CSS：
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
回答by RRR
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
这是我发现的最简单的实现结果的方法：只需在文本前使用 hr 标签，并为文本设置页边距顶部。非常简短易懂！提琴手
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}<br>
<hr>
<h2>ABOUT US</h2>回答by Thomas Higginbotham
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
不再需要额外的包装器或 span 元素。Flexbox 和 Grid 可以轻松处理这个问题。
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}<h2>Heading</h2>回答by acmb3
Here is how I do this: http://jsfiddle.net/Zz7Wq/2/
这是我如何做到这一点：http: //jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
我使用背景而不是 after 并使用我的 H1 或 H2 来覆盖背景。不是你上面的方法，但对我来说效果很好。
CSS
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
