Cómo crear un título con líneas horizontales a ambos lados

Este escenario implica la tarea de crear un título centrado con líneas horizontales centradas verticalmente a cada lado, manteniendo un fondo transparente debido a la presencia de una imagen de fondo. A pesar de los intentos de centrar el título y crear una línea usando pseudoclase, el desafío sigue siendo hacer que la línea desaparezca cuando cruza el texto del título.

Una posible solución es utilizar un fondo degradado con transparencia donde las palabras residen. Sin embargo, este enfoque resulta poco práctico cuando se trata de títulos de diferentes longitudes, lo que hace imposible la colocación de paradas de degradado.

El código proporcionado inicialmente es el siguiente:

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

Haciendo referencia al enlace proporcionado en la respuesta, una versión modificada del código es la siguiente:

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 resuelve el problema y garantiza que las líneas horizontales desaparezcan cada vez que cruzan el texto del título.