before css не работает

Замечательные псевдо-классы, которые позволяют добавить виртуальные контейнеры в начало или конец контейнера. Как они работают и почему могут «не сработать»?

Условия для работы 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 и к нему уже применять псевдоэлементы.

Оцените статью