CSS: po nie dodaniu treści do niektórych elementów

:before I :after nie są wymagane do pracy z wymienionymi elementami, a specyfikacje CSS nie określają, w jaki sposób będą one dla nich działać, a koncepcja zastąpionego elementu jest nieco niejasna.

Specyfikacja CSS 2.1 wyraźnie sugeruje , że one mogą pracować dla zastępowanych elementów, mówiąc tylko, że nie "w pełni definiuje" jak. Odnosi się to do kwestii, że wymieniony element ma mieć własny rendering wizualny, który nie jest kontrolowany przez CSS, natomiast pseudoelementy powinny coś dodać do zawartości elementu. Spec dodaje, że zostanie to zdefiniowane "bardziej szczegółowo" w przyszłej specyfikacji, ale do tej pory nie miało to miejsca.

Dostawcy przeglądarek postanowili uniknąć problemów, nie implementując tych pseudo-elementów dla niektórych elementów w ogóle.

Nie jest jasne, co oznacza "Element Zastępczy", a znaczenie wydaje się nieco zmienić. Często jest interpretowany jako oznaczający to samo jako pusty element (element z zadeklarowaną zawartością EMPTY, tzn. element, który nie może mieć żadnej zawartości), ale sam CSS 2.1 pokazuje przykładowy arkusz stylów z selektorem br:before (chociaż przeglądarki zignorowały to, implementując br na swój własny sposób). Można argumentować, że coraz więcej elementów weszło w zakres renderowania CSS, przynajmniej częściowo. Na przykład element input (zawierający jego czcionkę, kolory itp.) jest w dużej mierze sterowany CSS w nowoczesnych przeglądarki.

Obecne przeglądarki (Firefox, IE, Chrome) nie obsługują pseudoelementów :after i :before dla pustych elementów innych niż hr. Dla hr, IE i Chrome umieszczają wygenerowaną zawartość wewnątrz obramowanego pudełka, które jest implementacją hr; zawartość sprawia, że pudełko jest wyższe. Firefox umieszcza zawartość obu (!) pseudoelementy po regule horyzontalnej będącej jej implementacją hr. Ta odmiana ilustruje rodzaje problemów "interakcji", które są o którym mowa w CSS 2.1.

Często twierdzi się, że te pseudoelementy nie mogą być używane dla pustych elementów, ponieważ ich definicje HTML nie zezwalają na zawartość. To jest błąd kategorii. Reguły składniowe języka znaczników nie ograniczają tego, co można zrobić w CSS

Podsumowując, :after i :before nie są obecnie użyteczne dla pustych elementów( z wyjątkiem marginalnie dla hr), ale wynika to głównie z implementacji i może ulec zmianie w przyszłości.

Elementy, które nie mają znacznika zamknięcia, są elementami void i nie mogą wyświetlać zawartości wewnątrz nich:

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

Wszystkie przeglądarki Blink, Webkit i Quantum pozwalają na tworzenie pseudo elementów tylko na checkboxach, ale jest to kontrowersyjne, ponieważ żadna specyfikacja nie zezwala na takie zachowanie.

Oto przykład: 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%);
    }
  }
}