Верстка · Senior · Запитання 9 з 75
Чому в <img> та <input> не працюють ::before і ::after?
- 1У цих елементів за замовчуванням
display: inline, а псевдоелементам потрібен блок - ✓Правильна відповідь: Це замінювані або порожні елементи - у них немає вмісту для вставлення
- 3Це відомий баг Chromium, а у Firefox псевдоелементи в них працюють
Пояснення
::before/::after вставляються всередину елемента, перед і після його вмісту. Вміст <img>, <video>, <iframe> замінюється зовнішнім ресурсом, а <input>, <br> - порожні елементи. Обхідний шлях - обгорнути елемент у контейнер і повісити псевдоелемент на нього. display тут ні до чого: у <span> з inline псевдоелементи працюють.