CSS :before 및 :after 선택기가 HTML 콘텐츠를 삽입할 수 있나요?

CSS :before 및 :after 선택기를 사용하여 HTML 삽입

CSS에서 :before 및 :after 의사 요소를 사용하면 다음을 추가할 수 있습니다. 실제 내용을 수정하지 않고 요소 앞이나 뒤의 임의의 내용. 그러나 이 접근 방식의 한계에 유의하는 것이 중요합니다.

과제: :before 및 :after

를 통해 HTML 추가하기 다음 코드를 고려하세요.

li.first div.se_bizImg:before {
    content: "<h1>6 Businesses Found <span class='headingDetail'>(view all)</span></h1>";
}

이 코드 조각의 목적은 :before 의사 요소를 사용하여 DOM에 HTML 제목을 삽입하는 것입니다. 그러나 아시다시피 이 코드는 작동하지 않습니다.

:before 및 :after

여기서 핵심 문제는 :before 및 :after 선택기. 텍스트 내용만 허용합니다. 마크업 언어인 HTML은 이 속성을 이용해 직접 삽입할 수 없습니다.

대체 접근 방식

원하는 결과를 얻으려면 대안 접근 방식이 필요합니다. DOM을 직접 조작하고 HTML 마크업을 삽입하려면 JavaScript 또는 jQuery를 사용하는 것이 좋습니다. 또 다른 옵션은 필요한 HTML을 동적으로 생성할 수 있는 템플릿 엔진을 사용하는 것입니다.

추가 고려 사항

• 코드에서 " 내부 " 블록 사용 정확하지 않습니다. 따옴표가 올바르게 중첩되었는지 확인하세요(class='headingDetail').
• 콘텐츠를 사용하여 HTML 코드를 추가하면 콘텐츠가 자체적으로 재귀적으로 추가되는 무한 루프가 발생할 수 있습니다.

위 내용은 CSS :before 및 :after 선택기가 HTML 콘텐츠를 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!