CSS для добавления подчеркивания после содержимого заголовка

Question

Задача

Я работаю над проектом по созданию тематики веб-сайта, но мне не разрешено изменять HTML или JavaScript. Я могу только обновлять таблицу стилей CSS и добавлять / обновлять изображения.

Requrements

• Мне нужно оформить тег h3, чтобы подчеркивание / граница после содержимого.
• Этот h3 будет использоваться несколько раз на странице, поэтому длина конента может варьировать
• Решение должно быть кросс-браузер (IE 6/7/8, FF 3, & Safari)

Пример кода

<div class="a">
   <div class="b"><!-- etc --></div>
   <div class="c">
      <h3>Sample Text To Have Line Afterwards</h3>
      <ul><!-- etc --></ul>
      <p class="d"><!-- etc --></p>
   </div>
</div>

Пример вывода

Sample Text to Have Line Afterwards ______________________________________

Another Example __________________________________________________________

And Yet Another Example __________________________________________________

Примечания

• Я думаю #sample: after {content: "__________"; } опция не будет работать, так как она будет правильной длины только для одного из тегов
• Я пробовал фоновое изображение, но если оно доставляло мне проблемы, если я давало его с большой шириной
• Использование текстового отступа не помогло мне получить эффект, который я искал
• Я попробовал комбинацию бордюра и текстового оформления: нет, но это тоже не сработало

Любые идеи будут высоко оценены!

Answer 1

Это будет работать, если класс 'c' всегда является родителем h3 ...

.c {
    position: relative;
    margin-top: 25px;
    border-top: 1px solid #000;
    padding: 0px;
}
h3 {
    font-size:20px;
    margin-top: 0px;
    position: absolute;
    top: -18px;
    background: #fff;
}

Позволяет контейнеру иметь границу, затем использует абсолютное позиционирование для перемещения h3 над ним, а цвет фона позволяет ему стирать часть границы с, которую он покрывает.

Answer 2

попробуйте прикрепить фоновое изображение к классу c повторяющегося подчеркивания, затем добавьте цвет фона в h3, чтобы он соответствовал фону контейнера. Я полагаю, что вам придется плавать влево по h3, чтобы ширина рухнула. это имеет смысл?

.c {
    background: #ffffff url(underline.gif) left 20px repeat-x;
}
.c h3 {
    margin: 0;
    padding: 0 0 2px 0;
    float: left;
    font-size: 20px;
    background: #ffffff;
}

Answer 3

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c ul { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }

http://besh.dwich.cz/tmp/h3.html

Answer 4

Предполагая, что вы работаете с динамическим контентом, лучшее, что я могу предложить, - это принять постепенную деградацию и использовать сочетание great_llama и Богдана Ганики

Представьте себе:

A long title that will wrap to two lines___________________ 
and leave you like this in great_llama's solution

и вообще ничего не появляется с решением Богдана Ганицкого, если ul не предшествует сразу.

Решение:

.c h3 { display: inline; background-color: white; margin: 0; padding: 0; line-height: 1em; }
.c + * { margin-top: -1px; border-top: 1px solid; padding-top: 1em; /* simulate margin with padding */ }

Мы заботимся о IE6, но признаем, что это эстетическое прикосновение, и пользователи IE6 не пострадают. Если вы не можете заставить дизайнера принять это И не можете изменить HTML, сделайте что-нибудь еще (прежде чем найдете другую работу ;) )

Answer 5

проверить исходный код: http://nonlinear.cc/lab/friends/elijahmanor.html

тогда опять у меня НЕТ ИДЕИ, как контролировать конец строки.

Answer 6

Можете ли вы добавить контент в теги UL? Если это так, это может сработать:

h3 { display: inline; margin: 0; padding: 0 10px 0 0; float: left;}
ul { display: inline; border-bottom: 1px solid black; }

Answer 7

Вот лучший ответ:

 .c {
    background: url('line.png') repeat-x 0 20px;
 }
 H3 {
    background-color: white;
    display: inline;
    position: relative;
    top: 1px;
 }

В качестве подчеркивания используйте небольшое изображение высотой 1 пиксель и пару пикселей в ширину и закрасьте его цветом фона на H3.

Answer 8

это сработало для меня

        div.c
        {
        background-image:url(line.gif);background-repeat:repeat-x;width:100%;height:20px;
        }
        div.c h3
        {
        height:20px;background-color:white;display:inline;
        }

вы делаете div ширину вашего контента

тогда вы устанавливаете фон h3 на фон вашей страницы. тогда это будет перекрывать фоновое изображение полного div. Возможно, вы захотите поиграть с фоновым позиционированием в зависимости от вашего изображения

Answer 9

Единственное решение, которое я до сих пор представлял, - это создать изображение в формате PNG или GIF, высотой 1px и очень большой шириной (в зависимости от вашего проекта, например, 1x2000px), и сделать что-то вроде этого:

h3#main-title { background: url(line.png) no-repeat bottom XYZem; }

где XYZ вы устанавливаете вручную, для каждого заголовка, в единицах 'em'. Но я не могу найти 100% -ное динамическое решение для этого, без использования JS или добавления дополнительной разметки.

Answer 10

 H3 {
    border: 1px solid red;
    border-width: 0 0 1px 0;
    text-indent: -60px;
 }

Вам нужно знать ширину текста, но она работает довольно хорошо.