Верстка заголовка с горизонтальной линией слева и справа от текста
Время от времени возникает необходимость сверстать необычный заголовок, в котором слева и/или справа от текста проходит горизонтальная линия, занимающая все свободное пространство.
Выглядит это следующим образом (живой пример):
Раньше для решения данной задачи я бы задействовал два тега: первому задал бы верхний бордюр, а второй сместил бы чуть вверх, задав ему белый фон и внутренний отступ слева и справа.
Однако, эту задачу можно решить и другим, более красивым способом – использовав всего один тег. Кроме того, данный способ выручает в том случае, когда нет возможности вставить в исходный код второй тег.
Как несложно догадаться, для добавления линий будут задействованы псевдоэлементы :before и :after.
Вот CSS-код с комментариями для основных свойств, решающих поставленную задачу:
.title {
/* чтобы линии не выходили за ширину блока заголовка */
overflow: hidden;
}
.title:before,
.title:after {
content: '';
/* делаем линию строчно-блочной */
display: inline-block;
/* выравниваем вертикально по середине */
vertical-align: middle;
/* не позволяем ширине превысить 100% (будет добавлен бордюр) */
box-sizing: border-box;
/* установка ширины в 100% делает линию равной ширине тега заголовка
** благодаря этому линия заполнит все свободное пространство
** слева и справа от текста
*/
width: 100%;
height: 3px;
background: #6CBD83;
/* добавляем к линии левый и правый бордюр цветом основного фона заголовка
** благодаря этому создается нужный отступ между линиями и текстом
*/
border: solid #FFF;
border-width: 0 10px;
}
.title:before {
/* смещаем левую линию влево отрицательным отступом, равным 100% ширины
** благодаря этому линия встает слева от текста
*/
margin-left: -100%;
}
.title:after {
/* смещаем правую линию вправо отрицательным отступом, равным 100% ширины
** благодаря этому линия встает справа от текста
*/
margin-right: -100%;
}
Вот таким хитрым кодом это и делается.
У меня есть еще один аналогичный вариант решения данной задачи – через абсолютное позиционирование псевдоэлементов :before и :after. Однако, он оказался непригодным к использованию из-за очередного бага в браузере Internet Explorer (даже в последних версиях).
Смотрите также
FAQ на тегах details и summary с анимацией и микроразметкой
На сайтах часто встречаются блоки с ответами на часто задаваемые вопросы. Ответы при этом по умолчанию скрыты, а при клике на вопрос ответ раскрывается. Такого типа блок еще называют “аккордеоном”. ...
Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем ...
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Комментарии (35)
А если внутри h1 поставить span и ему дать background-color: #fff; position: relative; а h1:before просто выровнять по вертикали и на всю ширину, получится тот же эффект. Или же нежелательно ставть внутри заголовка span?
Решать вам. Не вижу смысла плодить теги.
зато css-а меньше)
В белом цвете шикарно смотрится.
Если заголовок будет состоять из нескольких строк (например если разбить тегом br), то линии будут показываться не корректно.
Да и без br может быть просто длинный заголовок и/или маленький экран. Скриншот – http://joxi.ru/4Ak3yLeT5EZKAq
Благодарю от души! Чудесно работает :)
Спасибо выручили, быстро и самое главное просто! работает как часики
Спасибо, отличное решение
Классная статья.
Да и сайт классный! Особенно дизайн нравится. Очень симпатично выглядит
не понимаю зачем нужны
Из комментариев к коду, понял что это создаёт отступы от текста до линии, но я сделал таким способом.
В чём разница подходов ? Какой метод более приемлем в обращении ?
Без разницы. Какой больше нравится, тот и использовать.
Как по мне Ваш вариант лучше, так как если бэкграундом указана картинка, то бордер выделяется на ее фоне
крутое решение! спасибо
Здравствуйте. У меня при использовании стилей заголовок отображается “приклеенным” к левой стороне (сразу текст и правая линия до конца блока), левый отрезок появляется лишь немного при исключении из кода box-sizing. В чем может быть причина?
Спасибо, отличное решение.
С заголовком бывают проблемы при вёрстке. Нужно внимательнее проверять, когда его пишите
Спасибо большое за полезную статью. Очень помогла.
Здравствуйте, я не понимаю как сделать, чтобы текст оказался посередине (пример 2)
Добавьте
text-align: center;для элемента.Dimox, а можешь сделать раздвижку типа [текст]….[текст] – чтобы там где точечки раздвигалось? Как-то максимально компактно, чтобы не было лишней разметки.
Спасибо! Очень помогла статья.
добрый день. как сделать так же, только чтобы линия была вертикальной?
Привет. Статья пригодилась. Сделал нечто подобное.
а как сделать чтобы она была адаптивной?
Dimox, огромное тебе спасибо! Это очень-очень помогло!