—»     —»   Разбираем псевдо-элементы :before и :after
  Раздел: CSS/Style Sheets   Нет комментариев  

Разбираем псевдо-элементы :before и :after



Каскадные таблицы стилей (CSS) в основном применяются для стилизации HTML-разметки, но в некоторых случаях, когда недостаточно использовать только дополнительную разметку или это невозможно сделать, на помощь приходят некоторые свойства CSS, которые позволяют нам добавлять дополнительную разметку без преломления всего документа. Такие свойства называются псевдо-элементы.

Разбираем псевдо-элементы :before и :after

Вы наверняка уже слышали этот термин, особенно если вы следите за руководствами, которые мы выкладываем здесь на сайте.

Всего несколько членов семейства CSS называют псевдо-элементами, и вот некоторые из них: :first-line, :first-letter, ::selection, :before и :after. Но в нашей сегодняшней статье мы ограничимся лишь :before и :after. Мы изучим данный вопрос с самой основы.

Синтаксис и браузерная поддержка

Псевдо-элементы появились еще в CSS1, но :before и :after были добавлены только в CSS2.1. В самом начале псевдо-элементы использовали одно двоеточие, а затем, с развитием веб и появлением CSS3, синтаксис псевдо-элементов был изменен на двойное двоеточие – ::before и ::after. Это было необходимо для того, чтобы псевдо-элементы можно было отличить от псевдо-классов (т.е. от :hover, :active и т.д.).

Разбираем псевдо-элементы :before и :after

Тем не менее, если будете использовать одно двоеточие вместо двойного, то браузеры все равно смогут распознать их. И так как IE8 поддерживает синтаксис только лишь с одним двоеточием, будет более практично использовать именно одно.

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

Вкратце, псевдо-элементы вставляют дополнительный элемент перед или после контента. То есть, если мы добавим сразу два псевдо-класса, технически они будут равны. И для этого нам потребуется следующая разметка:

<p>
<span>:before</span>
This the main content.
<span>:after</span>
</p>

Но эти элементы на самом деле не будут сгенерированы в документе. Он будут видны на нем, но в исходном коде документа их нельзя будет отыскать. Так что, можете называть их поддельными элементами.

Применение псевдо-элементов

Применение псевдо-элементов довольно простое. Синтаксис selector:before добавит элемент до селектора контента, а синтаксис selector:after добавит его уже после него. И для того чтобы добавить в них контент, мы можем использовать параметр content.

Например, нижеприведенный отрывок кода добавит знак цитирования до и после элемента blockquote.

Разбираем псевдо-элементы :before и :after

blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}

Стилизация псевдо-элементов

Несмотря на то, что данные элементы «мнимые», они ведут себя вполне естественно, как и реальные элементы. Мы можем добавить к ним стилизацию: изменить цвет, добавить фон, изменять размер шрифта, выравнивать текст внутри них и так далее.

Разбираем псевдо-элементы :before и :after

blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;

}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}

Указание габаритов

Сгенерированные элементы по умолчанию являются строчными элементами (inline), поэтому когда нам нужно указать их ширину и высоту, нам сперва потребуется обозначить их как блочный элемент (block) по помощи объявления display: block.

Разбираем псевдо-элементы :before и :after

blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;

/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;

/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}

Устанавливаем фоновое изображение

Мы также можем заменить контент изображением, вместо того чтобы использовать сплошной текст. Хотя параметр content предлагает нам строку url() для указания изображения, мы все же предпочитаем использовать параметр background, чтобы сохранять больше контроля над установленным изображением.

Разбираем псевдо-элементы :before и :after

blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;

background: url(images/quotationmark.png) -3px -3px #ddd;

display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;

background: url(images/quotationmark.png) -1px -32px #ddd;

display: block;
height: 25px;
width: 25px;
}

Тем не менее, как видно в приведенном выше фрагменте кода, мы все равно объявляем параметр content пустой строкой. Параметр content – это необходимость, и мы всегда должны его применять. В противном случае, псевдо-элемент просто не будет работать.

Комбинирования с псевдо-классами

Хотя это и разные типы «псевдо», мы можем использовать псевдо-классы вместе с псевдо-элементами в одном CSS-правиле. Например, если нам нужно изменить фон знака цитирования, сделать его немного темнее при наведении на элемент blockqoute.

Разбираем псевдо-элементы :before и :after

blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}

Добавляем эффект перехода

Мы даже можем применить к ним параметр transition, чтобы цвет изменялся в сопровождении красивого эффекта.

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

К сожалению, эффект перехода, похоже, будет работать только в последней версии Firefox. Надеемся, что остальные браузеры очень скоро будут оборудованы поддержкой этого параметра для псевдо-элементов.

* Демо
* Скачать исходный код

Больше вдохновения

Для того чтобы вдохновить вас, мы подобрали 3 отличных примера, которые помогут вам придумать эффекты для собственных проектов.

Увлекательные тени

В данном руководстве Paul Underwood рассказывает о том, как создать более реалистичный и увлекательный эффект тени при помощи псевдо-элементов :before и :after. Оба они позиционированы абсолютно, и расположены очень глубоко по структуре при помощи отрицательного значения параметра z-index.

Разбираем псевдо-элементы :before и :after

3D-кнопка

Очень хитрое применение псевдо-элементов в комбинации с css3 box-shadow с целью создания невероятной трехмерной кнопки при помощи только лишь кода CSS и одного тэга a. Псевдо-элемент :before используется для того, чтобы отобразить «1» с левой стороны кнопки.

Разбираем псевдо-элементы :before и :after

Эффект разбросанных изображений

Так же возможно применение псевдо-классов для создания эффекта сваленных в кучу изображений. Псевдо-элементы используются для создания иллюзии, будто разбросанные изображения находятся под нужным нам изображением. Это реализуется за счет отрицательного значения параметра z-index.

Разбираем псевдо-элементы :before и :after

Завершение

Псевдо-элементы – это просто «круто!» и очень широко применимо. Как будто у нас есть еще два дополнительных элемента для каждого элемента, и использовать их мы можем, не нарушая при этом структуры HTML-документа.

В псевдо-элементах есть некоторые улучшения, над которыми до сих пор работают. Например, вложенные псевдо-элементы div::before::before { content: ''; } и многократные псевдо-элементы div::before(3) { content: ''; }, которые, очевидно, откроют нам гораздо больше возможностей в будущем. Но пока поддержку этих элементов всего лишь разрабатывают для браузеров, нам придется немного подождать.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8361   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930