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

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

Вы слышали об этом термине, особенно когда читали некоторые из наших руководств.

На самом деле есть несколько членов семьи CSS, которые классифицируются как псевдо-элементы такой как :первая строка, :первое письмо, :: выбор, :до а также :после. Но для этой статьи мы ограничим наше освещение только :до а также :после, “псевдо-элементы” здесь конкретно будут ссылаться на них обоих. Мы рассмотрим этот конкретный предмет с основ.

Поддержка синтаксиса и браузера

псевдо-элементы на самом деле был вокруг с CSS1, но :до а также :после что мы обсуждаем здесь, были выпущены в CSS2.1. В начале псевдо-элементы использовать синтаксис с одинарным двоеточием, а затем, по мере развития сети, в CSS3 псевдо-элементы были пересмотрены для использования двойной двоеточия - став ::до & ::после - различать это с псевдоклассы (т.е.. : парить, : активный, и так далее).

Однако независимо от того, используете ли вы один или два двоеточия, браузер все равно распознает их. А поскольку Internet Explorer 8 поддерживает только один двоеточие, безопаснее использовать двоеточие, если требуется более широкая совместимость с браузером..

Что оно делает?

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

:до Это основное содержание. :после

Но эти элементы на самом деле не генерируются в документе. Они все еще видны на поверхности, но вы не найдете их в источнике документа, так что практически они не настоящие элементы.

Использование псевдоэлементов

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

Например, фрагмент ниже добавит кавычку до и после BLOCKQUOTE.

 blockquote: before content: открытая цитата;  blockquote: after content: close-quote;

Стайлинг псевдоэлементов

Несмотря на то, что является поддельным элементом, псевдо-элементы на самом деле действовать как “реальный” элемент; мы можем добавить к ним любое объявление стилей, например, изменение цвета, добавление фона, изменение размера шрифта, выравнивание текста внутри него и т. д..

 blockquote: before content: открытая цитата; размер шрифта: 24pt; выравнивание текста: по центру; высота строки: 42px; цвет: #fff; фон: #ddd; плыть налево; положение: относительное; верх: 30 пикселей;  blockquote: after content: close-quote; размер шрифта: 24pt; выравнивание текста: по центру; высота строки: 42px; цвет: #fff; фон: #ddd; плавать: правильно; положение: относительное; низ: 40 пикселей;

Указание размера

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

 blockquote: before content: открытая цитата; размер шрифта: 24pt; выравнивание текста: по центру; высота строки: 42px; цвет: #fff; фон: #ddd; плыть налево; положение: относительное; верх: 30 пикселей; радиус границы: 25 пикселей; / ** определить его как элемент блока ** / display: block; высота: 25 пикселей; ширина: 25 пикселей;  blockquote: after content: close-quote; размер шрифта: 24pt; выравнивание текста: по центру; высота строки: 42px; цвет: #fff; фон: #ddd; плавать: правильно; положение: относительное; низ: 40 пикселей; радиус границы: 25 пикселей; / ** определить его как элемент блока ** / display: block; высота: 25 пикселей; ширина: 25 пикселей;

Прикрепить фоновое изображение

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

 blockquote: before content: ""; размер шрифта: 24pt; выравнивание текста: по центру; высота строки: 42px; цвет: #fff; плыть налево; положение: относительное; верх: 30 пикселей; радиус границы: 25 пикселей; background: url (images / quotationmark.png) -3px -3px #ddd; дисплей: блок; высота: 25 пикселей; ширина: 25 пикселей;  blockquote: after content: ""; размер шрифта: 24pt; выравнивание текста: по центру; высота строки: 42px; цвет: #fff; плавать: правильно; положение: относительное; низ: 40 пикселей; радиус границы: 25 пикселей; background: url (images / quotationmark.png) -1px -32px #ddd; дисплей: блок; высота: 25 пикселей; ширина: 25 пикселей;

Однако, как видно из приведенного выше фрагмента, мы все еще объявляем содержание свойство и на этот раз с пустой строкой. содержание свойство требование и всегда должен применяться; в противном случае Псевдо-элемент не будет работать что бы ни.

Сочетание с псевдоклассами

Хотя они другой вид псевдо, мы можем использовать псевдоклассы вместе с псевдо-элементы вместе в одном правиле CSS, например, если мы хотим превратить фон кавычки немного темнее, когда мы находимся над BLOCKQUOTE.

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

Добавление эффекта перехода

И мы можем даже применить переход свойство на них, чтобы создать эффект изящного цветового перехода.

 переход: все 350 мс; o-переход: все 350 мс; -моз-переход: все 350мс; -Вебкит-переход: все 350мс;

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

демонстрация
Скачать исходный код

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

Чтобы вдохновить вас, мы выбрали три классных примера, которые могут дать вам идеи для вашего веб-дизайна.

Завораживающие тени

В этом уроке Пол Андервуд объяснил, как создать более реалистичный и захватывающий эффект тени, используя :до а также :после псевдо-элементы. Оба они расположены абсолютно и расположены сзади. отрицательный Z-индекс значение.

Эффект с накоплением изображения

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

Заключение

пseudo-элементы это просто “прохладно” и в конечном итоге пригодны для использования, в основном мы имеем два бонусных элемента для каждого элемента, который мы добавляем, не мешая реальной структуре HTML, а затем превращая их практически во все, что мы можем себе представить.

На самом деле есть некоторые улучшения для псевдо-элементы над которым сейчас ведутся работы, такие как вложенные псевдоэлементы div :: before :: before content: "; а также несколько псевдоэлементов div :: before (3) content: "; что, очевидно, откроет гораздо больше возможностей в практике веб-дизайна в будущем. Пока они реализуются в текущих браузерах, давайте терпеливо подождем.