Почем у псевдоэлементы ::after и ::before у тега input не работают или работают странно?

@Kranc · Регистрация: 15.06.2025

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="accent">текст</span>
<br>
<input class="accent" type="text">
<br>
<input class="accent" type="checkbox">
<br>
<input class="accent" type="submit">
<style>
.accent::before,
.accent::after {
  content: "*";
}
</style>

первый скриншот из chrome
второй скриншот из firefox
Почему псевдоэлементы отображаются в хром только у чекбокса, а в фаерфокс не отображаются у всех инпутов?

@voraa · 07.08.2025, 14:03

Наверно у Хрома не полное соответствие спецификации (или они ее не так поняли и реализовали).
::before и ::after не могут должны к элементам у которых не бывает дочерних элементов.

@gogolik · 07.08.2025, 14:10

voraa, а их и не было. Прописываешь - не появляются. Возможно, что какие-то новшества, нужно будет проверить.

@voraa · 07.08.2025, 14:34

Сообщение от gogolik

нужно будет проверить.

В Хроме везде срабатывают before и after. И на винде и в линухе и в iOs. И в Сафари тоже.
В Файрфоксе их нет

И у type=radio, type=date тоже есть.
Похоже Хроме (и Сафари) считают, что если они что то вставили отличное от того, что в value, то это внутреннее содержимое, поэтому можно и ::before и ::after вставлять.

@gogolik · 07.08.2025, 14:52

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

@voraa · 07.08.2025, 15:29

Сообщение от gogolik

по запаре поставил инпуту ::before

У input type=text нет.

@gogolik · 07.08.2025, 15:30

voraa, там радио или чекбокс был. Кастомная стилизация.

@voraa · 07.08.2025, 16:15

Самое удивительное, что они работают и в <hr>. Даже в Файрфокс.

Добавлено через 5 минут

Сообщение от gogolik

voraa, интересно. С пол года назад на актуальной тогда версии по запаре поставил инпуту ::before - он тупо не появился.

Интересно, что это еще в 2016г было.
Нашел такой документ от W3C
https://lists.w3.org/Archives/... /0190.html

Safari и Chrome допускают использование псевдоэлементов в полях ввода форм.
В других браузерах этого нет. Мы рассматривали возможность удаления этой функции, но
use-counter фиксирует ~0,07% страниц, использующих его, что в 20 раз превышает наш максимум
порог удаления.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@voraa 1255 / 1197 / 179 Регистрация: 21.01.2024 Сообщений: 5,523
	07.08.2025, 14:03
	Наверно у Хрома не полное соответствие спецификации (или они ее не так поняли и реализовали). ::before и ::after не могут должны к элементам у которых не бывает дочерних элементов. 0

@gogolik Супер-модератор 3954 / 2066 / 829 Регистрация: 13.03.2010 Сообщений: 6,806
	07.08.2025, 14:10
	voraa, а их и не было. Прописываешь - не появляются. Возможно, что какие-то новшества, нужно будет проверить. 0

@gogolik Супер-модератор 3954 / 2066 / 829 Регистрация: 13.03.2010 Сообщений: 6,806
	07.08.2025, 14:52
	voraa, интересно. С пол года назад на актуальной тогда версии по запаре поставил инпуту ::before - он тупо не появился. Хотя, возможно это препроцессор просто вырезал такую несуразуцу. 0

@gogolik Супер-модератор 3954 / 2066 / 829 Регистрация: 13.03.2010 Сообщений: 6,806
	07.08.2025, 15:30
	voraa, там радио или чекбокс был. Кастомная стилизация. 0