CSS: після не додавання вмісту до певних елементів

У мене виникають проблеми з розумінням поведінки властивості CSS :after. Відповідно до специфікації ( тут і тут ):

Як вказують їх назви, :beforeі :afterпсевдоелементи задають розташування вмісту до та після вмісту дерева документа.

Схоже, це не обмежує елементи, які можуть мати :after(або :before) властивість. Однак, здається, працює лише з конкретними елементами ... <p>працює, <img>не <input>робить, не <table>робить. Я міг би більше перевірити, але справа зроблена. Зауважте, що це виглядає досить послідовно у веб-переглядачах. Що визначає, чи може об'єкт приймати a :beforeта :afterвластивість?

imgі inputобидва замінені елементи .

Замінений елемент - це будь-який елемент, зовнішній вигляд і розміри якого визначаються зовнішнім ресурсом. Приклади включають в себе зображення ( <img>теги), плагін ( <object>теги), а також елементи форми ( <button>, <textarea>, <input>, і <select>мітка). Усі інші типи елементів можна назвати як незамінені елементи.

:beforeі :afterпрацювати лише з незаміненими елементами.

З специфікації :

Примітка. Ця специфікація не повністю визначає взаємодію :beforeта :afterіз заміненими елементами (наприклад, IMG в HTML). Це буде визначено більш детально в майбутній специфікації.

З span:before, span:after, DOM виглядає так:

<span><before></before>Content of span<after></after></span>

Очевидно, що це не буде працювати <img src="" />.

:beforeі :afterне потрібно працювати для замінених елементів, а специфікації CSS не визначають, як би вони працювали для них, а концепція заміненого елемента дещо розпливчаста.

Специфікація CSS 2.1 чітко підказує, що вони можуть працювати на замінених елементах, просто кажучи, що це не "повністю визначає", як. Це стосується питання, що очікується, що замінений елемент має власне візуальне відображення, яке не контролюється CSS, тоді як псевдоелементи повинні щось додати до змісту елемента. Специфікація додає, що це буде визначено "більш докладно" в майбутній специфікації, але це досі не відбулося.

Продавці браузерів просто вирішили уникати проблем, взагалі не застосовуючи ці псевдоелементи для деяких елементів.

Зовсім не ясно, що означає «замінений елемент», і значення, схоже, дещо змінилося. Його часто трактують як те саме, що означає порожній елемент (елемент із EMPTYоголошеним вмістом, тобто елемент, який не може мати жодного вмісту), але сам CSS 2.1 показує зразок стильового аркуша із селектором br:before(хоча браузери проігнорували це, реалізуючи brсвій власний спосіб). Можна стверджувати, що все більше елементів перейшли у сферу візуалізації CSS, принаймні частково. Наприклад, inputелемент (включаючи його шрифт, кольори тощо) значною мірою керується CSS у сучасних браузерах.

Поточні веб-переглядачі (Firefox, IE, Chrome), схоже, не підтримують :afterі :beforeпсевдоелементи для порожніх елементів, крім hr. Бо hrIE та Chrome розміщують створений вміст всередині облямованого вікна, що є реалізацією hr; вміст робить поле вище. Firefox розміщує вміст обох (!) Псевдоелементів після горизонтального правила, яке є його реалізацією hr. Цей варіант ілюструє види проблем "взаємодії", про які йдеться у CSS 2.1.

Часто стверджується, що ці псевдоелементи не можна використовувати для порожніх елементів, оскільки їхні визначення HTML не дозволяють вмісту. Це помилка категорії. Правила синтаксису мови розмітки не обмежують те, що можна зробити в CSS

На закінчення, :afterі :beforeнаразі вони не використовуються для порожніх елементів (за винятком незначних hr), але це, головним чином, пов'язано з реалізаціями і може змінитися в майбутньому.

Елементи, у яких немає закриваючого тегу, є недійсними елементами, і вони не можуть відображати вміст всередині них:

https://www.w3.org/TR/html5/syntax.html#void-elements

Усі браузери Blink, Webkit та Quantum дозволяють створювати псевдоелементи лише у вікнах, але це суперечливо, оскільки жодна специфікація не дозволяє такої поведінки.

Ось приклад: https://codepen.io/equinusocio/pen/BOBaEM/

input[type="checkbox"] {
  appearance: none;
  color: #000;
  width: 42px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 100px;
  cursor: pointer;
  transition: all 100ms;
  background-size: 30%;
  outline: none;
  position: relative;
  box-sizing: border-box;
  background-color: #eee;
  transition: background-color 200ms;

  &::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: currentColor;
    will-change: transform;
    transition: transform 200ms cubic-bezier(.01,.65,.23,1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  &:checked {
    background-color: aquamarine;

    &::before {
      transform: translateX(100%);
    }
  }
}