朝向与任一侧的水平线 [英] heading with horizontal line on either side

问题描述

我正在开发一些CSS，其中设计要求页面标题（标题）以垂直居中在任一侧的水平线为中心。此外，在页面上有背景图像，所以标题的背景需要是透明的。

I am working on some CSS where the design calls for page titles (headings) to be centered with horizontal lines that are vertically centered on either side. Further, there is a background image on the page so the background of the title needs to be transparent.

我有标题的中心，我可以使用伪类来创建行。但我需要的线消失，当它穿过标题的文本。

I have centered the title and I can use pseudo class to create the line. But I need the line disappear when it cross the text of the title.

我考虑使用一个透明的背景渐变，这是因为每个标题可能有不同的长度，我不知道放在哪里。

I considered using a background gradient that goes transparent where the words are, but since each title could be a different length, I wouldn't know where to put the stops.

以下是到目前为止的CSS：
`

Here is the CSS so far: `

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/

推荐答案

看看这个http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition ，此处是您的答案。

Look at this http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition , here is your answer.

这是您的原始程式码已修改

Here is your original code modified

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;
}

http://jsfiddle.net/XWVxk/8/

注意：文章已不在线了，这里是最后一个很好的归档版本：
http ：//web.archive.org/web/20140213165403/http：//blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition

Note: the article is not online anymore, here is the last good archived version: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition

这篇关于朝向与任一侧的水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！