CSS 使用 Css3 背景中的水平线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11392089/
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
Horizontal Line in Background using Css3
提问by SaurabhLP
How to implement this type of style to text using only css3, means a horizontal line in the middle of the tag... Can it be possible using pure css...
如何仅使用css3将这种类型的样式实现到文本中，意味着标签中间有一条水平线......是否可以使用纯CSS......
Here's my structure:-
这是我的结构：-
<p class="datedAside">4 weeks ago</p>
回答by Klesun
You can achieve this with pure css using linear gradient as background:
您可以使用线性渐变作为背景使用纯 css 实现此目的：
<p class="datedAside">4 weeks ago</p>
<style>
p {
background: linear-gradient(180deg,
rgba(0,0,0,0) calc(50% - 1px),
rgba(192,192,192,1) calc(50%),
rgba(0,0,0,0) calc(50% + 1px)
);
}
</style>
回答by tb11
Here's one way to do it by adding a span inside the p.
这是通过在 p 中添加跨度来实现的一种方法。
HTML:
HTML：
<p class="datedAside"> <span> 4 weeks ago </span> </p>?
CSS:
CSS：
p {background: #000; height:1px; margin-top:10px;}
p span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}?
回答by micadelli
One of the simplest way I know, you can achieve this like this:
我知道的最简单的方法之一，您可以像这样实现：
HTML
HTML
<p>Your text goes here</p>
<hr>
? CSS
? CSS
p {
background: #fff; // or whatever is your bg-color
display:inline-block;
padding-right: 1em;
line-height: 1.2em;
}
p+hr {
margin-top: -0.6em;
}
JSFiddlehttp://jsfiddle.net/cTMXa/1/
JSFiddle http://jsfiddle.net/cTMXa/1/
回答by rlucha
You can do it with a 1% gradient like this
你可以像这样用 1% 的渐变来做到这一点
.datedAside {
background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
background: #FFF;
padding: 0 0.5rem;
}
You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.
您需要将额外的跨度设置为与组件背景相同的背景颜色，以使其看起来像是“删除”了文本后面的行。
回答by Mister Wonderful
You could add a pseudo-element to the paragraph selector like so:
您可以像这样向段落选择器添加一个伪元素：
p {
::before {
border-top: 10px solid #0066a4;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 12px; left: 0; right: 0; bottom: 0;
z-index: -1;
}
}
See this CodePen by Eric Rasch for a working example: https://codepen.io/ericrasch/pen/Irlpm
有关工作示例，请参阅 Eric Rasch 的 CodePen：https://codepen.io/ericrasch/pen/Irlpm
回答by Neekobus
An alternative with flex and ::before and ::after. With this solution, you don't need to use a background for the content.
使用 flex 和 ::before 和 ::after 的替代方案。使用此解决方案，您无需为内容使用背景。
With this HTML markup :
使用此 HTML 标记：
<p class="datedAside"><span>4 weeks ago</span></p>
And this CSS :
这个 CSS ：
.datedAside {
display: flex;
flex-flow: nowrap;
justify-content: space-between;
align-items: center;
}
.datedAside span {
padding: 1em;
}
.datedAside::before,
.datedAside::after {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
content: " ";
height: 0px;
border-bottom: 1px solid black;
}
回答by awjh
Artur's solution creates a line however if you increase the px value it becomes clear that the line is still a gradient. This can be fixed by using a start and stop for the middle colour as such:
Artur 的解决方案创建了一条线，但是如果您增加 px 值，很明显这条线仍然是渐变。这可以通过使用中间颜色的开始和停止来解决：
p {
background: linear-gradient(to bottom, white calc(50% - 1px), black calc(50% - 1px) calc(50% + 1px), white calc(50% + 1px));
}
The line will be double the thickness of the px value given (due to +px -px) so the above gives a horizontal 2px line across the center of the element.
这条线将是给定的 px 值的两倍粗细（由于 +px -px），所以上面给出了一条横跨元素中心的水平 2px 线。
