Псевдоэлементы css before after не работает

Почему псевдоэлементы ::before и ::after не работают для полей ввода и картинок

В CSS псевдоэлементы ::before и ::after нельзя добавлять к текстовым полям и изображениям, поскольку эти элементы, так называемые «замещаемые элементы», специальная категория объектов, описанная в разделе «Рендеринг» стандарта HTML:

Следующие элементы могут быть полностью заменены:
audio, canvas, embed, iframe, img, input, object, video.

Участник CSS Working Group под ником fantasai объясняет это на GitHub:

Замещаемые элементы могут полностью заменить все содержимое элемента, в том числе псевдоэлементы ::before и ::after. Вот почему в замещаемых элементах не работают псевдоэлементы.

Например, невозможно использовать ::before для элемента img, чтобы отобразить альтернативный текст (alt) — при этом метод сработает для других элементах (например на параграфе p).

В зависимости от браузера и других факторов, элемент img иногда может быть не замещаемым. Например, если изображение не загружается, у нас появляется возможность добавить ::before и ::after к img (эта возможность есть только в Chrome и Firefox).

Ситуация становится более запутанной, когда дело касается элементов формы. Элементы input и textarea, в настоящее время рассматривается как «частично замещенные» — определение, которое использует Tab Atkins (редактор спецификаций CSS) в обсуждениях Working Group на GitHub.

Так или иначе, возможность добавления ::before и ::after для полей ввода зависит от типа input и используемого браузера. Например, Chrome и Safari поддерживают свойство content для input type=»checkbox» и input type=»radio».

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

Источник

Популярно о псевдоэлементах :Before и :After

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.

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

Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:

Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

Пример использования псевдоэлементов

Элементы :before и :after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.

Использование

Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.

Простой пример: необходимо добавить кавычки для цитаты:

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

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

Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block:

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

В этом примере свойство content содержит пустую строку, это необходимо, иначе псевдоэлемент не будет правильно отображаться.

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

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:

Добавление transition-эффекта

Также можно применить свойство transition для плавного изменения цвета кавычек:

К сожалению, это нормально работает только в последних версиях Firefox.

Посмотреть демонстрацию примера из этой статьи.

Немного вдохновения

Три примера использования псевдоэлементов :before и :afte:

Источник

Поделиться

doctor Brain

мир глазами веб-разработчика

Почему ::before не работает?

почему псевдоэлемент ::before может быть неэффективен для полей ввода и изображений

время чтения 2 мин.

Псевдоэлементы CSS ::before и ::after могу быть неприменимы для полей ввода и изображений, так как HTML-элементы и являются замещаемыми элементами (replaced elements). Для таких элементов отведена целая категория в rendering section описания HTML-стандартов.

Следующие элементы могут быть замещаемыми: audio, canvas, embed, iframe, img, input, object, и video.

Fantasai — представитель рабочей группы CSS так же дает объяснения этой особенности замещаемых элементов на GitHub:

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

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

Внимание: Элемент не всегда является замещаемым — это зависит от используемого в данный момент браузера и ряда других факторов. Например, если нет возможности загрузить изображение, псевдоэлементы ::before и ::after будут доступны к использованию в браузерах Chrome и Firefox.

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

можно назвать частично замещаемыми (semi-replaced). Этот термин предложил Таб Аткинс — редактор спецификаций CSS в обсуждениях рабочей группы на Github:

Все типы полей ввода, как минимум “частично замещаемые”. Мы до сих пор не можем быть полностью уверены в том, как такое состояние работает. Но это не “замещаемые элементы” в их полном представлении, так как они имеют определенные неизменяемые внутренние размеры, которым подчиняются (в отличие от обычных элементов).

Возможность добавить контент к элементам формы с помощью CSS-псевдоэлементов ::before и ::after зависит как от типа самого элемента, так и от используемого браузера. Например, Chrome и Safari поддерживают содержимое псевдоэлементов ::before и ::after для чекбоксов и радиокнопок:

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

Источник

Крутое использование псевдоэлементов CSS ::before и ::after

Дата публикации: 2019-04-17

От автора: я должен признаться: мне нравятся псевдо-элементы CSS ::before и ::after. Они похожи на пару приспешников в каком-то модном приключении. В 3 раза больше силы. В 3 раза больше стилей. В 3 раза больше удивительные визуальных эффектов, которые вы можете создать.

Вы никогда не окажетесь в одиночестве — потому что везде, где был один, теперь будут трое

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

Если вы никогда раньше не сталкивались с ::before и ::after, вы можете спросить: «Что это за псевдо-элемент, о котором вы говорите?»

Вот 30-секундный обзор: Псевдоэлементы являются «воображаемыми» элементами, которые можно вставить в документ с помощью CSS. Например, если бы я написал очень простой CSS:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Внезапно перед каждым p контента страницы будет вставлено слово «Hello». Псевдо-элемент ::after похож на него, но размещается после контента.

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

Тем не менее, я хочу выделить одну распространенную ошибку, потому что я так много раз ее совершал. Многие из применений, которые мы будем исследовать, включают в себя графику, но не содержат реального содержимого из слов. Это замечательно, но вы должны установить и свойство content, и, если ваш контент пуст, свойство display — или псевдо-элемент не будет отображаться. Я наступал на эти грабли много раз… поэтому никогда не забывайте начинать с настройки контента. Если ваше использование полностью визуально, просто установите:

Простое использование ::before и ::after

Давайте начнем с некоторых простых способов использования ::before и ::after.

Пользовательские иконки

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

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

Например, если бы я хотел, чтобы каждый элемент на странице с классом .kball отображал круг размером 30×30 с изображением моего профиля, я мог бы сделать что-то вроде этого:

Цитаты

Еще одно полезное использование ::before и ::after заключается в добавлении кавычек вокруг цитаты. Например, мы могли бы создать класс «quote», который применяет двойные кавычки до и после, и даже класс атрибуции, который добавляет в начале тире:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Продвинутое использование before и after

Создание фигур

Одной из проблем работы в HTML и CSS является ограниченное количество «базовых» фигур, с которыми вам приходится работать.

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

Но теперь с ::before и ::after у вас есть в 3 раза больше «блоков» для экспериментов. Каждый из них может быть отдельно преобразован, расположен и повернут. Это приводит к феноменальному выбору фигур, которые вы можете создать с помощью чистого CSS.

Крис Койер из CSS Tricks собрал здесь большую коллекцию возможных фигур, из которых я воспроизвел свои любимые, используя цветовую схему ZenDev.com. Верите или нет, это всего лишь 1 элемент HTML!

Отображение значений атрибутов

Еще одно очень крутое использование псевдо-элементов ::before или ::after — это отображение содержимого атрибута.
Вы можете сделать это, включив в content — attr([attributename]).

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

Одно из мест, где я использовал это раньше — это слайдер ZURB Foundation. Слайдер работает, изменяя значение в скрытом поле ввода… но что, если мы хотим сделать текущее значение видимым в самом слайдере? Элемент управления, которым мы манипулируем — это просто span… но он получает атрибут aria для текущего значения aria-valuenow. Ссылаясь на него в псевдо-элементе с помощью content: attr(aria-valuenow), мы можем отобразить его прямо на элементе управления.

Многоступенчатая анимация

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

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

Завершение

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

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

5 приемов с псевдоэлементами before after CSS 3

Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.

Мы все знаем, что эти классы и элементы используются как часть CSS3 . Данные псевдоэлементы были определены в CSS3 .

Псевдоклассы и псевдоэлементы CSS — в чем разница?

Псевдокласс: Используется как селектор для элементов, которые нельзя задать с помощью простых селекторов. А также эффекты 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 ? Если нет, тогда посмотрите приведенный ниже код.

Источник