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

Почему псевдоэлементы ::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, в чем ошибка?

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

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

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

ошибка в 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;
>

Источник

Могу ли я использовать:before или:after псевдо-элемент в поле ввода?

Я пытаюсь использовать :after CSS псевдо-элемент на input поле, но оно не работает. Если я использую его с span , он работает нормально.

это работает (ставит смайлик после «Буу! и перед «еще немного»)

это не работает — он только окрашивает someValue в красный цвет, но нет смайлика.

что я делаю не так? должен ли я использовать другой псевдоселектор?

примечание: Я не могу добавить span вокруг моего input , потому что он генерируется сторонним элементом управления.

19 ответов

:after и :before не поддерживаются в Internet Explorer 7 и ниже, на любых элементах.

Он также не предназначен для использования на замененных элементах, таких как элементы вида (входы) и элементы изображения.

иными словами,невозможно С чистым CSS.

при использовании в jQuery можно использовать

добавить свой содержание с javascript. Это будет работать во всех браузерах.

:before и :after рендеринг внутри контейнера

и не могут содержать другие элементы.

псевдо-элементы могут быть определены только (или лучше сказать, поддерживаются только) на элементах контейнера. Потому что способ их визуализации —внутри сам контейнер как дочерний элемент. input не может содержать другие элементы, поэтому они не поддерживаются. А button С другой стороны, это также элемент формы поддерживает их, потому что это контейнер с другими подэлементами.

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

спецификация W3C

если мы внимательно читаем спецификация он на самом деле говорит, что они вставлены внутри содержащий элемент:

авторы определяют стиль и расположение контента с помощью :before и :after псевдо-элементы. Как показывают их имена, псевдо-элементы :before и :after указывают местоположение содержимого до и после содержимого дерева документов элемента. Свойство «content» в сочетании с этими псевдоэлементами указывает, что вставляется.

посмотреть? дерево документов элемента контент. Как я понимаю, это означает внутри контейнер.

как ни странно, он работает с некоторыми типами ввода. По крайней мере в Chrome,

работает отлично, так же, как

Это просто type=text и некоторые другие, которые не работают.

вот еще один подход (предполагая, что у вас есть контроль над HTML): добавьте пустой сразу после ввода и целевой, что в CSS с помощью input.mystyle + span:after

Я использую этот подход в AngularJS, потому что он добавит .ng-invalid классы автоматически элементы формы, и к форме, но не к .

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

он не применяется для самозакрывающихся элементов.

на боковой ноте элементы, которые являются самозакрывающимися (например, img/hr/input), также известны как «замененные элементы», поскольку они заменяются соответствующим содержимым. «Внешние объекты» за неимением лучшего термина. Лучше читать здесь

я использовал background-image для создания Красной точки для обязательных полей.

Источник

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

Источник

Популярно о псевдоэлементах :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:

Источник