小编Tom*_*ver的帖子

我正在研究一些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吗？