两侧各有一条水平线的标题

Question

我正在一些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完成此操作吗？

Answer 1

这是您的原始代码已修改

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>