Линия под заголовоком

[rus]

Как сделать что бы не зависимо от длины заголовка, линия под ним была как у <h2>: http://jsfiddle.net/rus333/nva70qmz/1/ ?

[wwt]

что-то типо http://jsfiddle.net/wwt/sq7evvhv/

 

UPD поменял ссылку, а то там забыл убрать display у h1,h2

[Нарек]

Как вариант

http://jsfiddle.net/nva70qmz/2/

Хотя вариант не лучший.

 

Еще вариант получше

http://jsfiddle.net/nva70qmz/3/

 

Еще вариант

http://jsfiddle.net/nva70qmz/4/

 

Ну и вариант с флекс

http://jsfiddle.net/nva70qmz/5/

Edited October 23, 2015 by Нарек

[rus]

На всех вариантах, у длинного заголовка либо отсутствовала линия, либо находилась далеко от заголовка, а надо что бы было как на коротком заголовке - так же и на длинном, ну и растягивалась на 100%

p.s. браузер мозила

[Нарек]

На всех вариантах, у длинного заголовка либо отсутствовала линия, либо находилась далеко от заголовка, а надо что бы было как на коротком заголовке - так же и на длинном, ну и растягивалась на 100%

А, есть такой грешок когда заголовок занимает больше чем 1 строку) 

[rus]

Спасибо!!!

[Launder]

что-то типо http://jsfiddle.net/wwt/sq7evvhv/

 

UPD поменял ссылку, а то там забыл убрать display у h1,h2

 

Извините, а как в Вашем примере работает margin-right?

[psywalker]

Рустамыч, а как те такой вариант?

[rus]

Рустамыч, а как те такой вариант?

интересный, а что значит вот эта запись: bottom: .23em; ?

[psywalker]

 

Рустамыч, а как те такой вариант?

интересный, а что значит вот эта запись: bottom: .23em; ?

 

Она значит, что абсолютно позиционированный элемент будет прижат к нижнему краю, но не плотно, а будет находиться на расстоянии в .23em от нижнего края. Я специально выбрал единицы измерения "em", поскольку они могут плясать от размера шрифта. А цифра ".23" означает "0.23", подобрал "почти" наугад. Но это число вполне подходит, чтобы при любом размере шрифта эффект был один и тот же, и по идее в любом браузере, хотя... я бы проверил

[rus]

я имел ввиду точку перед единицей em, просто именно в таком виде впервые встречаю запись ))

по сути получается что можно было бы и вот так сделать: http://jsfiddle.net/rus333/nva70qmz/7/ ?

просто что-то я не допер до этого...

[psywalker]

я имел ввиду точку перед единицей em, просто именно в таком виде впервые встречаю запись ))

Ааа, понял) Вообще, это распространённая практика, и не только с единицами измерения. Например, пройди сюда. Вот Влад там пишет:

 

Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Следовательно можно прописывать такое любым свойствам.

 

 

по сути получается что можно было бы и вот так сделать: http://jsfiddle.net/rus333/nva70qmz/7/ ?

В том-то и дело, что нельзя) Ты выбрал пиксели (px), а я em-ы. Поэтому в твоём случае при разном размере шрифта твоя нижняя граница будет "гулять", отрываясь от "искусственной" базовой линии (пример), а в моём случае, поскольку я применяю em-ы, которые подстраиваются под размер шрифта, такой проблемы не будет (пример)

[Нарек]

Точка впереди это типа 0. ...

[wwt]

.23 = 0.23

не обязательно указывать 0 перед точной. Это кстати не только в CSS так, но и в javascript и php в частности.

[rus]

всем спасибо за комментарии, очень полезные.

я все понял