Не работает псевдокласс before

Почему псевдоэлементы ::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:

Источник

Не отображается :before, в чем ошибка?

Суть вопроса озвучена в названии поста. сначала сверстал и было все норм, но в один момент перестал отображаться :before. кеш чистил, не помогло. где я допустил ошибку? требуемые элемент в css обозначен зеленым цветом, класс .blog_item-activity .views:before. при проверке инструментами разработчика показывает, что нет высоты и ширины, хотя она задана. копировал аналогичный код с класса .blog_item-activity .comments:before, не помогло. в чем может быть ошибка?
Код.

UPD. решил через абсолют, но все равно не понятно, почему второй код работает, а первый нет, хотя они идентичны

• Вопрос задан более трёх лет назад
• 8661 просмотр

ошибка в position: relative; а должен быть absolute;
а в родительском блоке(то есть тег которому ты задаешь бефор) должно быть position: relative;

.views <
position: relative;
color: #999;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
font-style: italic;
line-height: 24px;
padding-left: 20px;
>

.views:before <
content: «»;
position: absolute;
width: 20px;
height: 11px;
top:0;
left:0;
>

Источник

Поделиться

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 , не забывайте проверить, с каким элементом Вы работаете — возможно он являетмся замещаемым полностью или частично.

Источник

::before (:before)

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content . По умолчания является инлайновым.

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

Синтаксис

В CSS3 появилась запись ::before (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :before , введённую в CSS2.

Примеры

Добавление кавычек

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

Результат

Пример оформления

Можно стилизовать текст или изображения в свойстве content практически любым способом.

Результат

Список дел

В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.

JavaScript

Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом ::before , стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.

Результат

Примечания

Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS: «Псевдоэлементы :before и :after взаимодействуют с другими элементами. как если бы они были настоящими элементами, добавленными в соответствующий им элемент.»), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент , как в примере ниже, вместо того чтобы добавлять два пустых элемента

Источник