Бешеный конкурс!
6:39
Автор: Рубрика: HTML и CSS Комментариев нет

Css псевдоэлементы: как работают и какие бывают?

css псевдоэлементыВ css псевдоэлементы позволяют делать много полезных вещей. Подробнее о них и их применении я расскажу вам сегодня.

Что такое псевдоэлементы?

По умолчанию понять отличия html от css очень легко. В языке разметки мы создаем элементы, а в таблице стилей стилизуем их, оформляя внешний вид. Это все понятно. Но псевдоэлементы — это исключение из правил. Они и создаются и оформляются только через css. По сути, это элементы, которых нет в разметке, но при этом мы можем их видеть, создавать и оформлять. Неплохо? Теперь подробнее о самых известных.

Псевдоэлементы before и after

Это наиболее часто используемые. Данные псевдоэлементы позволяют поместить что угодно до и после элемента. В общем-то, если вы не полный 0 в английском, то могли догадаться об этом по названию.

Соответственно, сами по себе элементы существовать не могут, а только в привязке к какому-то элементу из html-разметки. Например, есть абзац:
абзац
В css добавим ему два содержимое до и после него:

p:before{
content: "что-то перед абзацем";
display: block;
}
p:after{
content: "что-то после абзаца";
display: block;
}

Отлично, вот результат:
итог
Как видите, текстовое содержимое в псевдоэлементы можно добавить с помощью свойства content. Сам текст пишется в кавычках. Также задаем нашим элементам блочные свойства.

Реальный пример использования псевдоэлемента
Прошлый пример я привел просто для понимания, но сейчас рассмотрим, как можно применить знания в реальной практике. Добавим после каждого абзаца декоративную линию. Сама линия выглядит так:
line
После будем добавлять после, то воспользуемся элементом :after

p:after{
content: " ";
display: block;
background: url(line.png) no-repeat;
width: 500px;
height: 78px;
}

Результат, я добавил два абзаца, чтобы вы лучше понимали итог:
css применение псевдоэлементов

Чуть-чуть разберем код, чтобы вы понимали. Когда текст в псевдоэлементе не нужен, мы все равно должны прописать свойство content, но указать в нем пустоту (один пробел в кавычках). Это важно, без этого будет работать некорректно.

Далее добавляем блочные свойства, чтобы можно было указать ширину и высоту. Указываем размеры такие, как у линии. Ну и далее с помощью свойства background добавляем саму линию, а также запрещаем повторение фона на всякий случай. Все, вот вам реальный пример использования в верстке. Еще один пример вы можете найти тут.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Важные детали

  1. Псевдоэлементы before и after могут применяться только к реальных html-тегам, внутри которых есть какое-то содержимое. То есть ко всем парным тегам. Если вы попробуете применить к изображению (img), то ничего не получится, потому что тег одинарный.
  2. Псевдоэлементы не поддерживаются версиями IE 7 и ниже. Но сегодня их практически никто не использует, так что это небольшая проблема.
  3. К каждому элементу может быть применено только 2 псевдоэлемента: 1 before и 1 after. Больше нельзя.

Другие псевдоэлементы

Мы разобрали самые основные, но есть еще first-letter и first-line. Это очень полезные элементы. First-letter позволяет применить особые стили к первой букве абзаца, заголовка и любого другого текстового фрагмента. Подробно я написал об этом здесь.

First-line выделяем не первую букву, а первую строку текста. Тоже бывает очень полезно:

p:first-line{
background: orange;
}

первая линия

Первые строки всех абзацев получат оранжевый фоновый цвет.

Ладно друзья, на этом у меня сегодня все. Тема не очень сложная, но не такая очевидная. Думаю, вы разобрались. А если остались какие-то вопросы, стучите в комментарии smile

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

Комментариев нет