CSS : 특정 요소에 콘텐츠를 추가하지 않은 후

CSS :after속성 의 동작을 이해하는 데 문제가 있습니다. 사양에 따르면 ( here and here ) :

이름에서 알 수 있듯이 :before및 :after의사 요소는 요소의 문서 트리 콘텐츠 앞뒤에 콘텐츠 위치를 지정합니다.

이것은 어떤 요소가 :after(또는 :before) 속성을 가질 수 있는지에 대한 제한을 두지 않는 것 같습니다 . 그러나 특정 요소 에서만 작동하는 것 같습니다 ... <p>작동, 작동 <img>하지 않음, <input>작동하지 않음, <table>작동합니다. 나는 더 많은 것을 시험 할 수 있지만 요점이 있습니다. 이것은 브라우저에서 상당히 일관된 것처럼 보입니다. 객체가 :before및 :after속성을 받을 수 있는지 여부를 결정하는 것은 무엇입니까 ?

img및 input둘 다 대체 요소 입니다.

대체 된 요소는 외부 리소스에 의해 모양과 크기가 정의 된 요소입니다. 예를 들면 화상 (포함 <img>태그), 플러그인 ( <object>태그)과 폼 요소 ( <button>, <textarea>, <input>, 및 <select>태그). 다른 모든 요소 유형은 대체되지 않은 요소라고 할 수 있습니다.

:before및 :after대체되지 않은 요소 만 작동합니다.

에서 사양 :

노트. 이 사양은 완전히의 상호 작용을 정의하지 않습니다 :before및:after (예 : HTML의 IMG 등) 대체 요소를. 이는 향후 사양에서 더 자세히 정의 될 것입니다.

로 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 .NET 이외의 빈 요소에 대해 및 의사 요소hr . 의 경우 hrIE 및 Chrome은 생성 된 콘텐츠를 테두리가있는 상자 안에 배치합니다 hr. 내용물은 상자를 더 크게 만듭니다. Firefox는 두 (!) 가상 요소의 내용을 hr. 이 변형은 CSS 2.1에서 언급 된 "상호 작용"문제의 종류를 보여줍니다.

이러한 의사 요소는 HTML 정의가 내용을 허용하지 않기 때문에 빈 요소에 사용할 수 없다고 종종 주장됩니다. 이것은 카테고리 오류입니다. 마크 업 언어의 구문 규칙은 CSS에서 할 수있는 작업을 제한하지 않습니다.

결론에 :after와 :before현재 비어있는 요소에 사용할 수 없습니다 (가장자리를 제외하고 hr)하지만,이 주로 구현에 의한이며 향후 변경 될 수 있습니다.

닫는 태그가없는 요소는 void 요소이며 내부에 콘텐츠를 표시 할 수 없습니다.

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%);
    }
  }
}