我正在研究一些CSS,其中设计要求页面标题(标题)以水平线居中,水平线在两侧垂直居中。此外,页面上有背景图像,因此标题的背景需要是透明的。
我已将标题居中,并且可以使用伪类来创建该行。但我需要该线在穿过标题文本时消失。
我考虑使用背景渐变,在文字所在的位置变得透明,但由于每个标题可能有不同的长度,我不知道在哪里停止。
这是到目前为止的 CSS:
h1 {
text-align: center;
position: relative;
font-size: 30px;
z-index: 1;
}
h1:after {
content: '';
background-color: red;
height: 1px;
display: block;
position: absolute;
top: 18px;
left: 0;
width: 100%;
}
这是我所在的位置:http://jsfiddle.net/XWVxk/1/
可以使用 CSS 来完成此操作而不添加任何额外的 HTML 吗?
看这个http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition,这就是你的答案。
这是您修改后的原始代码
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
注意:该文章不再在线,这是最后一个好的存档版本:http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)