Html 水平线在两侧的航向

我正在研究一些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%;  
}  

这就是我现在的处境：

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

看看这个，下面是你的答案

这是您的原始代码修改

h1{
位置：相对位置；
字体大小：30px；
z指数：1；
溢出：隐藏；
文本对齐：居中；
}
h1:之前，h1:之后{
位置：绝对位置；
最高：51%；
溢出：隐藏；
宽度：50%；
高度：1px；
内容：'\a0'；
背景色：红色；
}
h1：之前{
左边缘：-50%；
文本对齐：右对齐；
}
.颜色{
背景色：#ccc；
}

这是我的标题
另一个类似的标题
只需标题

就可以了：

.floatClear{
明确：两者皆有；
}
#包装纸{
文本对齐：居中；
位置：相对位置；
}
#包装线{
底部边框：2倍纯红；
位置：绝对位置；
宽度：100%；
顶部：15px；
}
#包装器.文本框{
位置：绝对位置；
宽度：100%；
}
#包装器.textbox.text{
背景色：白色；
保证金：0px自动；
填充：0px 10px；
文本对齐：居中；
显示：内联；
字体大小：24px；
}

HTML
这是我的头衔

几天前就需要这个，但公认的答案在IE中不起作用

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

jsfiddle：

/*带行的标题*/
.装饰{
溢出：隐藏；
文本对齐：居中；
}
.装饰>跨度{
位置：相对位置；
显示：内联块；
}
.decorred>span:before，.decorred>span:after{
内容：''；
位置：绝对位置；
最高：50%；
边框底部：2倍实心；
宽度：100vw；
利润率：0.20px；
}
.装饰>跨度：之前{
右：100%；
}
.装饰>跨度：之后{
左：100%；
}

---

我的标题

不会投票关闭尽可能多的副本。其他类似的问题使用额外的标记或背景。谢谢，虽然你的小提琴对我不起作用，但链接提供了我需要的解决方案。谢谢有没有办法在单词的开头/结尾和行的结尾/开头之间加一个“边距”呢？实际上，我们已经找到了如何做的方法，只需在h1:声明之后加一个边距……这在IE中似乎不起作用。。。在9号和10号进行测试。有人知道修复方法吗？请参阅IE 9+卓越中的工作解决方案！这应该是公认的答案。我不太清楚为什么span:before和span:after上的宽度值必须是那个精确的值，将其设置为200%似乎对我同样有效。但这是一个很好的答案。：）这只是我从一个项目中复制的一些代码。宽度应至少为包含元素的一半（本例中为h2）。将其设置为200%将导致奇怪的行为，具体取决于内容的长度。虽然我很高兴能帮助你：）我也喜欢这个。我已经在JSFIDLE上测试了这两种方法，当您将窗口调整到较小的大小时，这一种方法不会产生奇怪的效果+1.虽然我需要做一些修改，因为我无法控制我正在处理的项目上的

标记的html，但这个解决方案更干净，可以在所有浏览器上工作，而且易于编辑。