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

1. Поддержка синтаксиса и браузера
2. Что оно делает?
3. Использование псевдоэлементов
4. Стайлинг псевдоэлементов
5. Указание размера
6. Прикрепить фоновое изображение
7. Сочетание с псевдоклассами
8. Добавление эффекта перехода
9. Больше вдохновения
10. Завораживающие тени
11. Эффект с накоплением изображения
12. Заключение

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

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

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

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

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

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

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

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

<p> <span>: before </ span> Это основной контент. <span>: после </ span> </ p>

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

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

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

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

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 пикселей; }

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

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

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 пикселей; }

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

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

цитата: 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 пикселей; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Похожие

Комментарии