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

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

단지 CSS를 만드는 것이 어떻게든 가능한지 궁금합니다.content속성 문자열 대신 HTML 코드 삽입:before또는:after다음과 같은 요소:

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

이것은 꽤 편리할 것입니다...자바스크립트를 통해 할 수 있지만 이를 위해 CSS를 사용하면 정말 삶이 더 쉬워질 것입니다 :)

안타깝게도, 이것은 불가능합니다.규격에 따라:

생성된 내용은 문서 트리를 변경하지 않습니다.특히 문서 언어 프로세서에 피드백되지 않습니다(예: 재분석).

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

예를 들어, 다음 HTML과 함께 지정된 CSS를 사용합니다.

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

다음과 같은 출력이 발생합니다.

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

@BoltClock의 답변에 대한 코멘트에서 거의 언급했듯이, 현대 브라우저에서 다음을 사용하여 실제로 일부 HTML 마크업을 의사 요소에 추가할 수 있습니다.url()) svg의 요소와 결합합니다.

실제 svg 파일을 가리키는 URL을 지정하거나 데이터를 사용하여 생성할 수 있습니다.URI 버전(data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

그러나 대부분 해킹이며 많은 제한이 있습니다.

• 이 마크업에서 외부 리소스를 로드할 수 없습니다(CSS, 이미지, 미디어 등).
• 스크립트를 실행할 수 없습니다.
• 이것은 DOM의 일부가 아닐 것이기 때문에 변경할 수 있는 유일한 방법은 마크업을 데이터로 전달하는 것입니다.URI, 그리고 이 데이터 편집URI(URIdocument.styleSheets이 부분을 위해, 그리고 도움이 될 수 있습니다.
• 동일한 작업을 통해 url 인코딩된 미디어를 로드할 수 있습니다.<img>태그, 이것은 유사 요소에서 작동하지 않을 것입니다(적어도 오늘날, 나는 그것이 그것이 해서는 안 되는 곳에 명시되어 있는지 모르기 때문에, 그것은 아직 구현되지 않은 기능일 수 있습니다.

이제, 의사 요소의 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()그리고.content: element().

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

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

.runner { 
  position: running(heading);
}

.runner는 임의의 요소가 될 수 있고,heading는 슬롯의 임의 이름입니다.

편집: 명확히 하기 위해 기본적으로 브라우저 지원이 없기 때문에/이미 제공된 '실용적인 답변' 외에 향후 참조를 위한 것이 대부분입니다.

XSS가 너무 쉬워서 불가능할 것 같습니다. 현재 또한현사가능한용 HTML재제삭허않습다니용지되은램을 .content소유물.

(분명히 여기서 가장 좋은 답변은 아니지만 "사양에 따른..." 이외의 통찰력을 공유하고 싶었습니다.)

페이지의 다른 곳에 HTML을 추가할 수 있는 기능이 있는 경우, CSS 콘텐츠가 표시되는 영역 위에 HTML의 위치를 변경할 수 있습니다.

CSS 콘텐츠를 추가합니다.

   .cssClass::after {
    content: "Content and Words and Things";
    color: #0000EE;
        }

링크처럼 보이도록 파란색 하이퍼링크를 추가했습니다.

그런 다음 참조할 수 있는 ID 또는 클래스가 있는 태그 사이에 텍스트가 없는 href를 추가합니다.같은 페이지에 있는 한 어디든 될 수 있습니다.

<a id="link" href="#"></a>

그런 다음 원하는 콘텐츠 위에 링크를 배치합니다.

a#link{
    height: 20px;
    width: 100%;
    left: 0;
    top: 5%;
    position: absolute;
}

언급URL : https://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text