Создать заголовок с эффектом зачеркивания. Создается с помощью псевдо-элементов
:before
и:after
.
Оба псевдо-элемента применяются только к одному элементу - заголовку определенного уровня и дополнительной разметки не требуется, все семантично. Линии подчеркивания имеют фиксированную ширину с обеих сторон, что упрощает задачу. Положение линий по вертикали - точно по центру.
Создание такого эффекта выполняется простым кодом. Первоначально задаем HTML-разметку с использованием заголовка первого уровня h1
:
about me
И прописываем для него CSS-правила, чтобы привести его к тому виду, который нам необходим:
h1{
width: 900px;
margin: 100px auto;
border: 1px solid #000;
text-align: center;
font-size: 40px;
line-height: 60px;
text-transform: uppercase;
position: relative;
}
Выравнивание по центру, размер шрифта (кегль) и высота блока через интерлиньяж line-height
, делаем все буквы заглавными - все стандартно. Но не забываем о позиционировании, которое устанавливаем относительным, ибо оно потребуется нам для псевдо-элементов :before
и :after
.
Теперь создаем общие правила для обоих псевдо-элементов :before
и :after
.
h1:before, h1:after{
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
left: 0;
height: 4px;
width: 320px;
background-color: #000;
}
Единственным примечательным моментом в этом коде является свойство top: 50%
, которое размещает линию точно по центру вертикали блочного элемента. В нашем случае таким блочным элементом является заголовок первого уровня h1
. Кроме того, нужно установить еще одно правило - margin-top: -2px
.
Этим правилом мы поднимаем сгенерированные линии вверх на половину их высоты. Почему это нужно делать, можно догадаться и так.
Так как правила мы прописали для обоих элементов, то следуют переписать некоторые из них для элемента :after
. Точнее - нам нужно только правило right
, чтобы “сдвинуть” его вправо:
h1:after{
right: 0;
left: auto;
}
Результат работы кода показан на рисунке ниже. Граница для заголовка задана мною для наглядности:
Полностью весь код для создания такого эффекта приведен ниже:
h1{
width: 900px;
margin: 100px auto;
border: 1px solid #000;
text-align: center;
font-size: 40px;
line-height: 60px;
text-transform: uppercase;
position: relative;
}
h1:before, h1:after{
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
left: 0;
height: 4px;
width: 320px;
background-color: #000;
}
h1:after{
right: 0;
left: auto;
}
UPD 19\01\2014
Для быстроты, удобства и краткости можно воспользоваться готовым миксином из библиотеки Scut - Side-Lined.
На этом все.
Комментарии