Como criar um título com linhas horizontais em ambos os lados

Este cenário envolve a tarefa de criar um título centralizado com linhas horizontais centralizadas verticalmente de cada lado, mantendo um fundo transparente devido à presença de uma imagem de fundo. Apesar das tentativas de centralizar o título e criar uma linha usando pseudoclasse, o desafio permanece em fazer a linha desaparecer ao cruzar o texto do título.

Uma solução potencial é utilizar um gradiente de fundo com transparência onde as palavras residem. No entanto, essa abordagem se torna impraticável ao lidar com comprimentos variados de títulos, impossibilitando a colocação de paradas de gradiente.

O código fornecido inicialmente é o seguinte:

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

Referenciando o link fornecido na resposta, uma versão modificada do código é a seguinte:

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

Este código modificado resolve o problema e garante que as linhas horizontais desapareçam sempre que cruzarem o texto do título.