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

246

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

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

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

— 자노 나
소스

@ Kaiido OMG ... 그것은 질문의 날짜를 확인하지 않았다, 나는 당신의 답변을 참조 ... 정말 죄송합니다,이 의견을 모두 삭제합니다 :)

— Ason

답변:

210

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

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

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

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

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

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

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

— BoltClock
소스

동의하지만 url속성 이있는 이미지를 이미 지원한다고 생각 하면 링크를 추가 해도이 관점에서 다르지 않습니다.

— zanona

@ludicco : 이미지 자체는 DOM 요소 (카운팅이 아님)가 아니기 때문에 <img>기존 요소에 그려지기 때문에 배경 또는 목록 이미지를 적용하여 실제로 DOM을 수정하지 않습니다.

— BoltClock

감사합니다, 그래서 나는이 아이디어를 전달하고 js로 바로 가야한다고 생각

— zanona

@ludicco : 좋은 질문입니다. 심지어 이것이 가능하기를 기대하면서도 검색했습니다.

— Robin Maben

@ 왓슨 : 다른 질문에 대한 답을 보았습니다. 네가 옳아; 나는 아마도 내 대답에서 임의의 마크 업을 추가 할 수 없다는 것을 분명히해야합니다 url(). 다른 이미지와 마찬가지로 외부 파일을 대신 지정해야합니다 .

— BoltClock

@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>

스 니펫 확장

— 카이이도
소스

나는 당신의 대답을 발견했으며, 그것은 내 자신의 문제 중 일부에 대한 해결책입니다. 파일을 가리키는 URL의 형식을 지정하는 방법을 설명 할 수 있습니까? 시도했지만 url('/relativePathToMySvg/mySvg.svg')작동하지 않았습니다.

— Frank

상대 경로를 사용하는 사양에 따라 @Frank는 CSS 파일의 경로와 관련이 있습니다. 즉, CSS 파일이에 들어 있으면 /root/css/yourFile.css상대 funcIRI와 같이 yourFile.svg표시됩니다 /root/css/yourFile.svg/. 그러나 나는 이전의 일부 UA에 버그가 있었고 문서의 baseURI와 관련하여 버그를 만들었다는 것을 기억합니다. 가장 안전한 방법은 절대 경로를 사용하는 것입니다.

— Kaiido

@BoltClock, 정말? 정말 죄송합니다. 나는 6 살짜리 질문에 다른 질문으로 와서 업데이트로 게시해야한다고 느꼈지만 6 년 전에 대답이 좋았으며 확실히 정확하다는 것이 더 분명해야합니까? 또는 머리글로 사용할 수있는 좋은 단어가 있으면 자유롭게 답변을 편집하십시오.

— Kaiido

좋은. : 내가 사용 content: url('../../images/como-funciona.svg');하고 그것을 잘 작동합니다

— Eliut 군도를

다음은 주제에 대해 좀 더 자세히 설명하는 이전 게시물입니다. is-it-possible-to-display-an-html-document-or-html-fragment-at-css-content

— Ason

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

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

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

.runner { 
  position: running(heading);
}

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

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

— 솔
소스

이봐, 좀 더 설명 해줄 수있어? 나는 당신의 이론에 관심이 있지만 그것을 실행할 수없는 것 같습니다. 이 방법이나 div를 사용하여 앵커 태그를 어떻게 포함합니까?

— 닐

문제는 현재 기본적으로 브라우저 지원이 없지만 전용 HTML 렌더러가 사양에 따라 구현한다는 것입니다. 그다지 좋지 않은 다음 소식은 좋은 오픈 소스 구현이없는 것 같습니다. princexml.com 과 같은 SaaS 제품이 대부분 입니다.

— sol