如何获得标题在文本后面有一条水平线? [英] How to get a headline to have a horizontal line behind the text?
本文介绍了如何获得标题在文本后面有一条水平线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在建立一个网站,一个模型在下面
I'm constructing a site and a piece of the mockup is below
由于我使用内容管理系统构建HTML,所以我必须使用一个 h3
标记。我想要后面的行具有包含 h3
标签的 div
的宽度。这可能吗?
Since I'm using a content management system that builds the HTML, all I have to work with a single h3
tag. I want the line behind to have the width of the div
containing the h3
tag. Is this possible?
这是距离我最近的地方: http:// jsfiddle.net/rmgtq6h6/
Here's the closest that I can get: http://jsfiddle.net/rmgtq6h6/
h3.line-behind { width: auto; position: relative; text-align: center}
h3.line-behind:after { content: " "; border-top: 3px solid black; position: absolute; width:100%; top: 50%; left: 0; z-index: 1; }
推荐答案
如果我理解正确,
h3.line-behind:after {
position:absolute;
content:'';
height:2px;
width:150%;
top:50%;
transform:translateY(-50%);
left:50%;
transform:translateX(-50%);
z-index:-1;
background: linear-gradient(to right, rgba(25,25,25,0) 0%,
rgba(25,25,25,1) 35%,
rgba(255,255,255,0) 36%,
rgba(255,255,255,0) 65%,
rgba(25,25,25,1) 66%,
rgba(25,25,25,0) 100%);}
或更实用的另一个示例在
or another example more practical add another pseudo-element ::before
h3.line-behind:after { position:absolute;
content:'';
height:2px;
width:50%;
top:50%;
transform:translateY(-50%);
left:0;
transform:translateX(-50%);
z-index:-1;
background: #000; }
h3.line-behind:before {position:absolute;
content:'';
height:2px;
width:50%;
top:50%;
transform:translateY(-50%);
right:0;
transform:translateX(50%);
z-index:-1;
background: #000; }
这篇关于如何获得标题在文本后面有一条水平线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文