html – 在CSS中,如何创建一个垂直居中的线,占据块元素后的剩余水平空间？

概述我正在实现一个设计,其中包含语义标题(h3,h4等)的元素,是全宽块元素,后面是一个垂直居中的水平线,它扩展了标题的整个宽度a la： 我知道我可以通过将每个标题包装在< div>中来解决这个问题.并在其后插入另一个块级元素,但不希望像这样污染我的HTML.我的第一个倾向是在标题上使用:: after元素,如下所示： .line-header::after { content:'\00a0 我正在实现一个设计,其中包含语义标题(h3,h4等)的元素,是全宽块元素,后面是一个垂直居中的水平线,它扩展了标题的整个宽度a la：

我知道我可以通过将每个标题包装在< div>中来解决这个问题.并在其后插入另一个块级元素,但不希望像这样污染我的HTML.我的第一个倾向是在标题上使用:: after元素,如下所示：

.line-header::after {    content:'
body { background: red; overflow-x: hIDden }.line-header {    margin-top: 15px;    margin-right: 5px;    display: inline;    z-index: 100;    float: left;    clear: left;}.line-header::after {    position:absolute;    content:'a0';    wIDth: 100%;    margin-top: -12px;    margin-left: 5px;    border-bottom: 1px solID gray;    z-index: 0;}
a0';    display: inline-block;    float: right;    wIDth: 55%;    margin-top: -12px;    border-bottom: 1px solID gray;}

但是,这需要使:: after元素固定宽度,这显然不适用于不同宽度的标题：http://jsfiddle.net/nbSTf/

有关如何获取可变宽度线以填充标题右侧空间而无需在HTML中插入额外元素的任何想法？

编辑：Tyriar的回答如下(建议在标题后面绘制全宽线并设置背景颜色以删除文本背后的线条)提醒我这是在重复的背景图像前发生 – 所以没有背景技巧可能不幸的是.

解决方法 试试这个CSS：

编辑：

我只在Chrome中测试了这个. Here’s the Fiddle.

总结

以上是内存溢出为你收集整理的html – 在CSS中,如何创建一个垂直居中的线,占据块元素后的剩余水平空间？全部内容，希望文章能够帮你解决html – 在CSS中,如何创建一个垂直居中的线,占据块元素后的剩余水平空间？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。