Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут «не сработать»?
Содержание
- Условия для работы after и before
- Разница между псевдоклассами и псевдоэлементами
- Метод 1: Псевдоэлементы со шрифтом Awesome
- Метод 2: Псевдоэлементы с фоном
- I have the background Image
- Метод 3: Псевдоэлементы с содержимым
- Метод 4: Псевдоэлементы с незаданным смещением
- Метод 5: Псевдоэлементы с наложением цвета при наведении
- 2 ответа 2
Условия для работы after и before
Псевдоклассы применимы к любым парным контейнерам, т.е. тегам которые могут «обернуть» какой то контент, имеют открывающийся и закрывающийся теги. К примеру, с они не работают, а со — пожалуйста.
Вторым важным требованием для «срабатывания» является наличие CSS свойства content.
Т.е. вот так, мы не получим никакого эффекта:
Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.
Мы все знаем, что эти классы и элементы используются как часть CSS3 . Данные псевдоэлементы были определены в CSS3 .
Разница между псевдоклассами и псевдоэлементами
Псевдокласс: Используется как селектор для элементов, которые нельзя задать с помощью простых селекторов. А также эффекты CSS , которые не могут быть заданы с помощью конкретных селекторов.
Например, :hover, :active
Псевдоэлемент : Используется для создания новых элементов, которые не существуют в документе, они управляются как обычный селектор.
Например, ::after, ::before
Для псевдоклассов мы используем одно двоеточие ( : ), а для псевдоэлементов — двойное ( :: ), которое является частью синтаксиса CSS3. Браузеры поддерживают оба типа синтаксиса, но в IE ( ниже 9 версии ) не поддерживается формат двойного двоеточия ( :: ).
Важным свойством псевдоэлементов hover active CSS является content: “ ” .
Значения свойства content :
content: «»
content: «любое конкретное значение»
Теперь рассмотрим приемы работы с псевдоэлементами.
Метод 1: Псевдоэлементы со шрифтом Awesome
Согласно последним тенденциям веб-дизайна, большинство сайтов используют Font Awesome для создания шрифтов иконок, а не изображения. Что увеличивает скорость загрузки сайта.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Теперь посмотрите на рисунок, приведенный ниже.
Метод 2: Псевдоэлементы с фоном
Вы когда-нибудь пробовали задать фоновое изображение для какого-нибудь элемента, используя li active CSS ? Если нет, тогда посмотрите приведенный ниже код.
I have the background Image
Посмотрите на рисунок, приведенный ниже.
Метод 3: Псевдоэлементы с содержимым
Это самый интересный и увлекательный прием. Иногда возникает ситуация, когда нужно добавить текст в любой блок, и мы не можем этого сделать. Для этой проблемы есть решение.
Метод 4: Псевдоэлементы с незаданным смещением
Что произойдет, если указать относительное смещение для двух блоков? Это даст ужасные результаты. Некоторые браузеры являются достаточно интеллектуальными, чтобы игнорировать такие ошибки. Но многие этого не делают:
Пример c hover active CSS :
Вот окончательный результат после применения явного свойства с использованием псевдоэлементов :
Метод 5: Псевдоэлементы с наложением цвета при наведении
Одна из последних тенденций в графическом дизайне — эффекта наложения цвета при наведении. Для этого можно использовать псевдоэлементы:
Пример :
Код li active CSS :
Теперь вы сможете применить описанные в статье приемы работы с hover active CSS в своих проектах.
Данная публикация представляет собой перевод статьи « 5 CSS3 TRICKS WITH PSEUDO ELEMENTS BEFORE AND AFTER » , подготовленной дружной командой проекта Интернет-технологии.ру
Почему не показываются черные блоки по углам?
2 ответа 2
селекторы :before и :after применяется ко всем элементам, но результат не везде даёт.
:before и :after добавляет контент к содержимому элемента, а у input же как такового содержимого нет.
Решение — завернуть инпуты в div и к нему уже применять псевдоэлементы.
Источник: