CSS свойство content: возможно ли вставить HTML вместо текста? - PullRequest
Новая
       22

CSS свойство content: возможно ли вставить HTML вместо текста?

212 голосов
/ 22 декабря 2010

Просто интересно, можно ли как-нибудь сделать так, чтобы свойство CSS content вставляло HTML-код вместо строки в :before или :after элемент вроде: 

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

это было бы очень удобно ... Это можно сделать через Javascript, но использование css для этого действительно облегчит жизнь:)

Ответы [ 3 ]

195 голосов
/ 22 декабря 2010

К сожалению, это невозможно. Согласно spec :

Созданный контент не изменяет дерево документа. В частности, он не передается обратно процессору языка документа (например, для повторного анализа).

Другими словами, для строковых значений это означает, что значение всегда обрабатывается буквально. Он никогда не интерпретируется как разметка, независимо от используемого языка документа.

В качестве примера, используя данный CSS со следующим HTML: 

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

... приведет к следующему выводу:

Назад Название

41 голосов
/ 01 июня 2016

Как уже отмечалось в комментариях к ответу @ BoltClock, в современных браузерах вы можете добавить некоторую html-разметку к псевдоэлементам, используя (url()) в сочетании с * 1005 svg.* element.

Вы можете либо указать URL-адрес, указывающий на фактический SVG-файл, либо создать его с версией dataURI (data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Но обратите внимание, что это в основномвзломать и что много ограничений:

  • Вы не можете загрузить любые внешние ресурсы из этой разметки (без CSS, без изображений, без медиаи т. д.).
  • Вы не можете выполнить скрипт.
  • Поскольку это не будет частью DOM, единственный способ изменить его - передать разметку как dataURI, иотредактируйте эти dataURI в document.styleSheets.для этой части DOMParser и XMLSerializer могут помочь .
  • В то время как одна и та же операция позволяет загружать носители с кодировкой URLв тегах <img> это не будет работать в псевдоэлементах (по крайней мере, на сегодняшний день, я не знаю, указано ли это где-либо, чего не следует, так что это может быть еще не реализованная функция).

Теперь небольшая демонстрация некоторой HTML-разметки в псевдоэлементе: 

/* 
**  original svg code :
*
*
*
* 
*	
*		I am HTML
* * * * * / 
#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>
5 голосов
/ 23 ноября 2017

В CSS3 с постраничным носителем это возможно при использовании position: running() и content: element().

Пример из CSS-сгенерированного контента для модуля выгружаемого мультимедиа черновик: 

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

.runner { 
  position: running(heading);
}

.runner может быть любым элементом, а heading - произвольным именем для слота.

РЕДАКТИРОВАТЬ: , чтобы уточнить, по сути, поддержка браузера отсутствует, поэтомуэто в основном предназначалось для использования в будущем / в дополнение к уже полученным «практическим ответам».

...