Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство. Выглядит это следующим образом (живой пример): Заголовок с выравниванием слева Заголовок с выравниванием по центру Заголовок с выравниванием справа Раньше для решения данной ...
На сайтах часто встречаются блоки с ответами на часто задаваемые вопросы. Ответы при этом по умолчанию скрыты, а при клике на вопрос ответ раскрывается. Такого типа блок еще называют “аккордеоном”. ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Комментарии (35)
Спасибо! Просто, красиво и практично!
А если текст в две строке то как полоски сделать?
Я раньше как-то не думал о пустых местах после моих заголовков на блоге, но они реально остаются. Наверное сделаю себе такую линию или придумаю, что-то более привлекательное. Спасибо автору за мысль!
Вот здесь много всего, и Ваше тоже – https://davidtheclark.github.io/scut/.
Делал что-то похожее с помощью line-height и position relative на белом фоне с border-bottom, но это не гарантировало точность для Safari и занимало один лишний тег внутри заголовка. Спасибо за способ с псевдо-элементами.
Спасибо за классную статью, и отдельное сенкс за код !!! который работает =)
Автор, не подскажете, как реализовать то же самое, только для заголовком h2-h3 например ?
Вставляю такую код:
И все сбивается.
Класс .title добавьте к тегу h2, в div удалите.
Dimox, как всегда спасибо ! Уже в который раз. С вашего сайта много полезного взял, спасибо, что помогаете.
P.S. Вопрос случайно продублировал, в кеше висела старая страница, думал мой комментарий или в спам ушел или не отправился.
А если внутри h1 поставить span и ему дать background-color: #fff; position: relative; а h1:before просто выровнять по вертикали и на всю ширину, получится тот же эффект. Или же нежелательно ставть внутри заголовка span?
Решать вам. Не вижу смысла плодить теги.
зато css-а меньше)
В белом цвете шикарно смотрится.
Если заголовок будет состоять из нескольких строк (например если разбить тегом br), то линии будут показываться не корректно.
Да и без br может быть просто длинный заголовок и/или маленький экран. Скриншот – http://joxi.ru/4Ak3yLeT5EZKAq
Благодарю от души! Чудесно работает :)
Спасибо выручили, быстро и самое главное просто! работает как часики
Спасибо, отличное решение
Классная статья.
Да и сайт классный! Особенно дизайн нравится. Очень симпатично выглядит
не понимаю зачем нужны
Из комментариев к коду, понял что это создаёт отступы от текста до линии, но я сделал таким способом.
В чём разница подходов ? Какой метод более приемлем в обращении ?
Без разницы. Какой больше нравится, тот и использовать.
Как по мне Ваш вариант лучше, так как если бэкграундом указана картинка, то бордер выделяется на ее фоне
крутое решение! спасибо
Здравствуйте. У меня при использовании стилей заголовок отображается “приклеенным” к левой стороне (сразу текст и правая линия до конца блока), левый отрезок появляется лишь немного при исключении из кода box-sizing. В чем может быть причина?
Спасибо, отличное решение.
С заголовком бывают проблемы при вёрстке. Нужно внимательнее проверять, когда его пишите
Спасибо большое за полезную статью. Очень помогла.
Здравствуйте, я не понимаю как сделать, чтобы текст оказался посередине (пример 2)
Добавьте
text-align: center;для элемента.