В css псевдоэлементы позволяют делать много полезных вещей. Подробнее о них и их применении я расскажу вам сегодня.
Что такое псевдоэлементы?
По умолчанию понять отличия html от css очень легко. В языке разметки мы создаем элементы, а в таблице стилей стилизуем их, оформляя внешний вид. Это все понятно. Но псевдоэлементы — это исключение из правил. Они и создаются и оформляются только через css. По сути, это элементы, которых нет в разметке, но при этом мы можем их видеть, создавать и оформлять. Неплохо? Теперь подробнее о самых известных.
Псевдоэлементы before и after
Это наиболее часто используемые. Данные псевдоэлементы позволяют поместить что угодно до и после элемента. В общем-то, если вы не полный 0 в английском, то могли догадаться об этом по названию.
Соответственно, сами по себе элементы существовать не могут, а только в привязке к какому-то элементу из html-разметки. Например, есть абзац:
В css добавим ему два содержимое до и после него:
p:before{
content: "что-то перед абзацем";
display: block;
}
p:after{
content: "что-то после абзаца";
display: block;
}
Отлично, вот результат:
Как видите, текстовое содержимое в псевдоэлементы можно добавить с помощью свойства content. Сам текст пишется в кавычках. Также задаем нашим элементам блочные свойства.
Реальный пример использования псевдоэлемента
Прошлый пример я привел просто для понимания, но сейчас рассмотрим, как можно применить знания в реальной практике. Добавим после каждого абзаца декоративную линию. Сама линия выглядит так:
После будем добавлять после, то воспользуемся элементом :after
p:after{
content: " ";
display: block;
background: url(line.png) no-repeat;
width: 500px;
height: 78px;
}
Результат, я добавил два абзаца, чтобы вы лучше понимали итог:
Чуть-чуть разберем код, чтобы вы понимали. Когда текст в псевдоэлементе не нужен, мы все равно должны прописать свойство content, но указать в нем пустоту (один пробел в кавычках). Это важно, без этого будет работать некорректно.
Далее добавляем блочные свойства, чтобы можно было указать ширину и высоту. Указываем размеры такие, как у линии. Ну и далее с помощью свойства background добавляем саму линию, а также запрещаем повторение фона на всякий случай. Все, вот вам реальный пример использования в верстке. Еще один пример вы можете найти тут.
Важные детали
- Псевдоэлементы
beforeиafterмогут применяться только к реальных html-тегам, внутри которых есть какое-то содержимое. То есть ко всем парным тегам. Если вы попробуете применить к изображению (img), то ничего не получится, потому что тег одинарный. - Псевдоэлементы не поддерживаются версиями IE 7 и ниже. Но сегодня их практически никто не использует, так что это небольшая проблема.
- К каждому элементу может быть применено только 2 псевдоэлемента: 1
beforeи 1after. Больше нельзя.
Другие псевдоэлементы
Мы разобрали самые основные, но есть еще first-letter и first-line. Это очень полезные элементы. First-letter позволяет применить особые стили к первой букве абзаца, заголовка и любого другого текстового фрагмента. Подробно я написал об этом здесь.
First-line выделяем не первую букву, а первую строку текста. Тоже бывает очень полезно:
p:first-line{
background: orange;
}
Первые строки всех абзацев получат оранжевый фоновый цвет.
Ладно друзья, на этом у меня сегодня все. Тема не очень сложная, но не такая очевидная. Думаю, вы разобрались. А если остались какие-то вопросы, стучите в комментарии