60

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

这可以在不添加任何额外 HTML 的情况下使用 CSS 完成吗？

4

3 回答 3

94

看看这个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 - 首映版

于 2013-03-21T20:42:49.520 回答
61

几天前需要这个，但接受的答案在 IE 中不起作用。

这就是我想出的：适用于所有主要浏览器（> ie8）

jsfiddle：http: //jsfiddle.net/gKve7/

/* headlines with lines */
.decorated{
     overflow: hidden;
     text-align: center;
 }
.decorated > span{
    position: relative;
    display: inline-block;
}
.decorated > span:before, .decorated > span:after{
    content: '';
    position: absolute;
    top: 50%;
    border-bottom: 2px solid;
    width: 100vw;
    margin: 0 20px;
}
.decorated > span:before{
    right: 100%;
}
.decorated > span:after{
    left: 100%;
}
<h2 class="decorated"><span>My Title</span></h2>

于 2014-04-18T13:42:46.733 回答
1

这可能有效：

.floatClear {
  clear: both;
}
#wrapper {
  text-align: center;
  position: relative;
}
#wrapper .line {
  border-bottom: 2px solid red;
  position: absolute;
  width: 100%;
  top: 15px;
}
#wrapper .textbox {
  position: absolute;
  width: 100%;
}
#wrapper .textbox .text {
  background-color: white;
  margin: 0px auto;
  padding: 0px 10px;
  text-align: center;
  display: inline;
  font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>HTML</title>
  <link rel="stylesheet" href="main.css" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div class="line"></div>
    <div class="textbox">
      <div class="text">This is my Title</div>
    </div>
  </div>
</body>

</html>

这里发生的情况是您将文本设置在背景线上，并使用背景颜色加上侧边距，这样它将隐藏文本块后面的线。

于 2013-03-21T20:58:33.427 回答