CSS: как подчеркнуть блок, но не те части, где он имеет текст

Question

Я хочу получить следующий результат:

__ _ __ _ __ _ __ _ ___ _Title of page

Итак, допустим, разметка html равна <h1>Title of page</h1>, а h1 установлен на width:100% и text-align:rightЯ хочу, чтобы это было только подчеркнуто в левой части заголовка.

Любая подсказка, как этого добиться?Я попытался обернуть заголовок в <div>, задать белый фон и немного сместить его, чтобы он перекрывал нижнюю часть поля h1, однако я не уверен, работает ли это на 100%.-browser.

Answer 1

альтернативное решение:

<div style="width:100%;float:left;border-bottom:1px solid">
 <h1 style="float:right;background-color:white;padding:1px;position:relative;top:1px">Hola</h1>
</div>​

http://jsfiddle.net/VMCax/1/

Answer 2

Вы можете попробовать это до тех пор, пока строка не имеет решающего значения для отображения содержимого, поскольку она поддерживает IE8 +.

h1:before{content:"________________"}​

jsfiddle здесь

Answer 3

Я бы использовал сгенерированный CSS контент с неразрывными пробелами и подчеркиванием: http://jsfiddle.net/JMVUa/1/

h1:before{
    content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
    text-decoration: underline;
}​

Answer 4

Похоже, что то, что вы пытаетесь сделать, будет лучше достигнуто с помощью контейнера-обертки и поплавка внутри.Сделайте внутренний div (или плавающий h1) белым фоном.Сделайте так, чтобы внешний div имел повторяющийся фон (repeat-y), равный интервалу с высотой строки текстового div.

Убедитесь, что div-обертка учитывает плавающий div (либо overflow: hidden, либо with withчеткое деление в конце числа.

Это даст вам эффект, который вы ищете, и должно работать с многострочными заголовками.