Почему псевдоэлементы ::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 для класса картинки
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Появляется картинки при изменении размера
Всем привет есть процедура изменения разрешения картинок, сделал что бы изменяло все картинки в.
кнопка появляется при появлении картинки delphi 7
Гуглил, не помогло. Все ищут случай наоборот. У меня такой порядок событий: 1 форма, нажимаю на.
При склеивании первой картинки и второй появляется чёрный фон
Создаётся картинка с прозрачным фоном такого же размера, как и первая картина. Первая картинка -.
В учебном заведении три компьютерных класса. Ввести площадь каждого класса и количество компьютеров.
Как-то так. Вы посмотрите может некоторые стили у Вас будут лишними.
И чем же это обусловлено? Вы хотите сказать, что лучше висячий тег img на сайте который не относится ни к чему? Почему не создать div с фоном вашей картинки, а тег img вообще выкинуть?
Добавлено через 23 минуты
Знаете почему у Вас не получается?
Да потому, что ::befor и ::after не работают с открытыми тегами типа img и др.
При создании класса в проекте, после сборки появляется ошибка Ошибка HTTP 403.14 — Forbidden.
Сайт только начинаю делать. БД подключена, данные выводятся. При создании класса в проекте, после.
Создание экземпляра класса-наследника для переменной с типом базового класса
Подскажите чайнику как создается экземпляр класса BC BaseClass BC = new DerivedClass(); .
В курсаче по ООП сказано создать для класса виртуальный метод,возвращающий уникальный идентификатор.
Может я чего-то не понимаю. Так вот.Припустим я создал готовый класс в Java,который выполняет.
Источник
Поделиться
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 обозначен зеленым цветом, класс .blog_item-activity .views:before. при проверке инструментами разработчика показывает, что нет высоты и ширины, хотя она задана. копировал аналогичный код с класса .blog_item-activity .comments:before, не помогло. в чем может быть ошибка?
Код.
UPD. решил через абсолют, но все равно не понятно, почему второй код работает, а первый нет, хотя они идентичны
- Вопрос задан более трёх лет назад
- 8650 просмотров
ошибка в 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 с элементами img?
Я пытаюсь использовать селектор :before , чтобы поместить изображение поверх другого изображения, но обнаружил, что просто не работает поместить изображение перед элементом img , только какой-то другой элемент . В частности, мои стили:
И я считаю, что это отлично работает:
Я могу использовать элемент div или p вместо этого span , и браузер правильно накладывает мое изображение поверх изображения в элементе img , но если я применяю наложение класс к самому img , он не работает.
Я бы хотел, чтобы это сработало, потому что это лишнее span меня оскорбляет, но, что более важно, у меня есть около 100 сообщений в блоге, которые я хотел бы изменить, и я могу сделать это за один раз, если бы мог просто измените таблицу стилей, но если мне придется вернуться и добавить дополнительный элемент span между элементами a и img , это будет намного больше.
13 ответов
К сожалению, большинство браузеров не поддерживают использование :after или :before для тегов img.
Однако вы МОЖЕТЕ выполнить то, что вам нужно, с помощью JavaScript / jQuery. Проверьте эту скрипку:
По причине того, почему это не поддерживается, ознакомьтесь с ответом coreyward.
Я нашел способ сделать эту работу на чистом css:
Метод Я просто поддельный контент
Чистый метод CSS для включения img: after.
Вы можете ознакомиться с CodePen: я просто поддельный контент или просмотрите источник .
Источник