CSS :after는 특정 요소에 콘텐츠를 추가하지 않음
CSS :after 속성은 문서 트리의 요소 뒤에 콘텐츠를 삽입하는 데 사용됩니다. . 그러나 단락(
) 및 표(
)와 같은 특정 요소에서만 작동하는 것으로 보이며 이미지(![]()
) 및 양식 입력()과 같은 대체 요소에서는 작동하지 않는 것으로 보입니다. ).
:after 및 :before의 허용 여부를 결정하는 요소 속성?
:after 및 :before의 동작은 대체된 요소가 다르게 작동한다는 사실에 따라 결정됩니다. 대체된 요소는 이미지, 플러그인, 양식 요소 등 외부 리소스에 의해 모양과 크기가 정의된 요소입니다.
CSS 사양에 따르면 :before 및 :after는 대체되지 않은 요소에서만 작동합니다. 즉, 요소 교체 전이나 후에 콘텐츠를 추가하는 데 사용할 수 없습니다.
Span의 예
다음 HTML을 고려하세요.
<span>Content of span</span>
로그인 후 복사
다음 CSS를 사용하면:
span:before {
content: "Before";
}
span:after {
content: "After";
}로그인 후 복사
이 시나리오의 DOM은 다음과 같습니다. this:
<span>
<before>Before</before>
Content of span
<after>After</after>
</span>
로그인 후 복사
이 구조는 :before 및 :after가 대체되지 않은 요소 앞뒤에 콘텐츠를 삽입하는 방법을 보여줍니다.
이미지 예외
그러나 이미지에 :after를 사용하면 동일한 결과가 나오지 않습니다. 결과:
<img src="image.png" />
로그인 후 복사
img:after {
content: "After";
}로그인 후 복사
이는 :after가 대체된 요소의 모양을 변경할 수 없기 때문입니다.
위 내용은 CSS `:after`가 이미지 및 입력과 같은 대체 요소에 콘텐츠를 추가하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
