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
. 의 경우 hr
IE 및 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%);
}
}
}