[html] CSS 내용 속성 : 텍스트 대신 HTML을 삽입 할 수 있습니까?

Html / 글쓴이

CSS content속성이 html 코드 대신 문자열 :before또는 :after다음과 같은 요소를 삽입 하도록 할 수 있는지 궁금합니다 .

.header:before{
  content: '<a href="#top">Back</a>';
}

이것은 매우 편리합니다 … Javascript를 통해 수행 할 수 있지만 CSS를 사용하면 삶을 더 쉽게 만들 수 있습니다. 🙂

답변

불행히도 이것은 불가능합니다. 당 사양 :

생성 된 컨텐츠는 문서 트리를 변경하지 않습니다. 특히, (예를 들어, 재분석을 위해) 문서 언어 프로세서로 피드백되지 않는다.

즉, 문자열 값의 경우 값이 항상 문자 그대로 처리됨을 의미합니다. 사용중인 문서 언어에 관계없이 마크 업으로 해석되지 않습니다.

예를 들어, 주어진 CSS를 다음 HTML과 함께 사용하십시오.

<h1 class="header">Title</h1>

… 결과는 다음과 같습니다.

<a href=”#top”> 뒤로 </a> 제목

답변

@BoltClock의 답변에 대한 주석에서 거의 언급했듯이 현대 브라우저 에서는 실제로 url()svg의 <foreignObject>요소 와 함께 ( )를 사용하여 의사 요소에 HTML 마크 업을 추가 할 수 있습니다 .

실제 svg 파일을 가리키는 URL을 지정하거나 dataURI 버전 ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))으로 생성 할 수 있습니다

그러나 그것은 대부분 해킹이며 많은 한계 가 있음에 유의하십시오 .

  • 이 마크 업에서 외부 리소스를 로드 할 수 없습니다 (CSS, 이미지, 미디어 없음).
  • 스크립트를 실행할 수 없습니다.
  • 이것은 DOM의 일부가 아니므로이를 변경하는 유일한 방법은 마크 업을 dataURI로 전달하고에서이 dataURI를 편집하는 것입니다 document.styleSheets. 이 부분에 대한 DOMParser그리고 XMLSerializer5 월 도움 .
  • 동일한 작업을 통해 URL로 인코딩 된 미디어를 <img>태그 로로드 할 수는 있지만 의사 요소에서는 작동하지 않습니다 (적어도 오늘 현재는 그것이 아닌 곳에서 지정되어 있는지 알 수 없으므로 아직 구현되지 않은 기능이어야 함).

이제 pseudo 요소의 html 마크 업에 대한 작은 데모 : 

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/
#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}
<p id="log">hi</p>

스 니펫 확장

답변

CSS3 페이지 미디어에서 position: running()and를 사용하여 가능합니다 content: element().

페이지 미디어 모듈 초안에 대한 CSS 생성 컨텐츠의 예 :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner는 모든 요소가 될 수 있으며 heading슬롯의 임의의 이름입니다.

편집 : 분명히하기 위해 기본적으로 브라우저 지원이 없으므로 이것은 이미 주어진 ‘실제 답변’외에도 향후 참조를위한 것입니다.

답변