Я работаю над некоторыми 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/
Можно ли это сделать с помощью CSS без добавления дополнительного HTML?