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으로 문의하세요.
정적 양식 공급자의 비교
Apr 16, 2025 am 11:20 AM
"정적 양식 공급자"라는 용어를 동전하려고합시다. 당신은 당신의 HTML을 가져옵니다
Sass를 더 빨리 만들기위한 개념 증명
Apr 16, 2025 am 10:38 AM
새로운 프로젝트가 시작될 때, Sass 컴파일은 눈을 깜박이게합니다. 특히 BrowserSync와 짝을 이루는 경우 기분이 좋습니다.
HTML 대화 요소와 함께 일부 실습
Apr 16, 2025 am 11:33 AM
이것은 처음으로 HTML 요소를보고 있습니다. 나는 그것을 잠시 동안 알고 있었지만 아직 스핀을 위해 그것을 가져 갔다. 그것은 꽤 시원하고 있습니다
PaperForm
Apr 16, 2025 am 11:24 AM
구매 또는 빌드는 기술 분야의 고전적인 논쟁입니다. 신용 카드 청구서에 라인 항목이 없기 때문에 물건을 구축하는 것이 저렴할 수 있지만
See all articles
