Решение проблемы генерации содержимого CSS в Firefox и Chrome

Быстрый ответ

Псевдоэлементы CSS ::before и ::after не применимы к элементам <input>, так как они являются самозакрывающимися, или, иначе говоря, замещаемыми элементами. Вместо этого можно применить технику обертывания элементов:

<span class="input-wrapper">
  <input type="text">
</span>

.input-wrapper::before {
  content: "Префикс:";
}

.input-wrapper::after {
  content: "Суффикс";
}

Применяя класс .input-wrapper, вы можете улучшить внешний вид поля ввода.

Ограничения псевдоэлементов

К сожалению, псевдоэлементы CSS не могут работать с некоторыми HTML-элементами, включая input, br, img. Это обусловлено их самозакрывающимся характером, который не позволяет добавлять к ним виртуальное содержимое.

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

Обход ограничений

Особенности textarea

Тег textarea работает по-другому. Он не является пустым элементом, но взаимодействует с псевдоэлементами ::before и ::after не вполне стандартно. Он основан на модели div, однако псевдоэлементы для него недоступны.

Подробнее об этом расскажет наш спикер на видео

Применение label

Существует семантически правильное решение – использование элемента <label>, ассоциированного с полем ввода. Это улучшает доступность и дает возможность гибко работать с псевдоэлементами.

<label for="user-input">Имя пользователя:</label>
<input id="user-input" type="text">

label::before {
  content: "👤 "; /* Эмодзи – новый тренд в псевдоэлементах */
}

label::after {
  content: " **обязательно"; /* Напоминание о девяностых */
}

Обертывание элементов

Применение внешних оберток (div или span) для input – это надежный метод, поддерживаемый всеми браузерами. Он эффективно решает задачу декорирования элементов с помощью псевдоэлементов.

Визуализация

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

Ваша футболка (👕): [Бирка с логотипом, Бирка с размером, Инструкция по уходу]

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

Ваша футболка с CSS (👕): [✨ Наклейка со спецпредложением, Бирка с логотипом, Бирка с размером, Инструкция по уходу, 🔍 Информационная наклейка]

Вот так, добавляя дополнительную информацию («наклейки»), мы усиливаем визуальное восприятие, подобно эффекту, который дает использование ::before и ::after, меняющих изображение полей ввода!

Различие поведения браузеров

Особенности реализации работы псевдоэлементов в различных браузерах могут влиять на пользовательский опыт. Чтобы избежать неожиданных сюрпризов, лучше отказаться от использования ::before и ::after с такими элементами как input, select, button, и другие элементы форм, стремясь к консистентности.

Спецификация CSS и таблицы совместимости браузеров, в качестве справочного материала, помогут вам выбрать наиболее универсальные подходы.

Улучшение внешнего вида форм

Несмотря на то, что псевдоэлементы в контексте input могут быть неприменимы, формы вполне можно стилизовать. Применение стилей к оберткам или меткам, а также использование CSS-селекторов для состояний фокуса (например, :valid, :invalid) и required атрибута для динамической стилизации, придаст форме привлекательный внешний вид.

Кодирование и псевдоэлементы

Если псевдоэлементы не подходят для ваших задач, то существуют другие методы. Фоновые изображения или отступы, имитирующие содержимое перед и после input, дают больше пространства для творчества при работе с HTML и CSS.

Полезные материалы

1. ::before – CSS | MDN
2. ::before и ::after | CSS-Tricks
3. Can I use... Поддержка HTML5, CSS3 и др.
4. Generated content, automatic numbering, and lists
5. CSS Псевдоэлементы | W3Schools
6. Стилизация веб-форм | MDN
7. html – Можно ли использовать псевдоэлементы :before или :after для поля ввода? | Stack Overflow