两侧有水平线的标题[重复]
Posted
技术标签:
【中文标题】两侧有水平线的标题[重复]【英文标题】：heading with horizontal line on either side [duplicate] 【发布时间】：2013-03-11 13:25:06 【问题描述】：我正在处理一些 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 完成吗？
【问题讨论】：
不会投票关闭尽可能重复。其他类似的问题使用额外的标记或背景。 【参考方案1】：看看这个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
【讨论】：
谢谢，虽然你的小提琴对我不起作用，但链接提供了我需要的解决方案。谢谢！ 有没有办法在单词的开头/结尾和行的结尾/开头之间放置一个“边距”？ 其实找到了怎么做，只需要在h1:after声明后加一个边距... 这似乎在 IE 中不起作用...在 9 和 10 中测试。有人知道修复方法吗？ 查看***.com/a/23155413/908861 IE 9 + 中的工作解决方案【参考方案2】：几天前需要这个，但接受的答案在 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>【讨论】：
太棒了！这应该是公认的答案。 我不太清楚为什么 span:before 和 span:after 上的宽度值必须是那个精确值，将其设置为 200% 似乎对我来说同样有效。这是一个很好的答案。 :) 这只是我从我一直在做的一个项目中复制的一些代码。宽度应至少为包含元素的一半（在本例中为 h2）。根据内容的长度，将其设置为 200% 会导致奇怪的行为。虽然很高兴我能帮助你:) 我也喜欢这个。我已经在 jsFiddle 上对它们进行了测试，当您将窗口大小调整为更小的尺寸时，这个并没有产生奇怪的效果。 +1！虽然我需要做一些 hack，因为我无法控制我正在处理的项目中<h1> 标记的 html - jsfiddle.net/yL13Lrcp
这个解决方案更干净，适用于所有浏览器，而且易于编辑。【参考方案3】：
这可能有效：
.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>这里发生的情况是您将文本设置在背景线上方，并使用背景颜色加上侧边距，这样它将隐藏文本块后面的线。
【讨论】：
以上是关于两侧有水平线的标题[重复]的主要内容，如果未能解决你的问题，请参考以下文章