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

246

Просто интересно, можно ли каким-то образом заставить contentсвойство CSS вставлять html-код вместо строки on :beforeили :afterэлемента вроде:

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

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

html css pseudo-element css-content zanona
источник

@Kaiido OMG ... это не так , не проверял дату вопроса, я сослался на ваш ответ ... действительно извините, будут удалены оба эти комментарии :)

Асон

Ответы:

210

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

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

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

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

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

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

<a href="#top"> Назад </a> Заголовок

BoltClock
источник

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

Занона

@ludicco: Это потому, что сами изображения не являются элементами DOM (не считая <img>), они просто рисуются на существующих элементах, поэтому, применяя фоновые изображения или изображения в списке, вы на самом деле не модифицируете DOM.

BoltClock

получил это спасибо, так что я думаю, что мне придется пропустить эту идею и перейти прямо к JS, ура

zanona

@ludicco: Хороший вопрос. Даже я искал в SO, надеясь, что это возможно.

Робин Мабен

@watson: Только что увидел твой ответ на другой вопрос. Ты прав; Я, вероятно, должен уточнить в своем ответе, что вы не можете добавить произвольную разметку - url()вместо этого вы должны указать внешний файл через , как с любым другим изображением.

BoltClock

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

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

Но обратите внимание, что это в основном хак и что существует множество ограничений:

Вы не можете загружать любые внешние ресурсы из этой разметки (без CSS, без изображений, без медиа и т. Д.).
Вы не можете выполнить скрипт.
Поскольку это не будет частью DOM, единственный способ изменить его - передать разметку как dataURI и отредактировать этот dataURI document.styleSheets. для этой части DOMParserи XMLSerializerможет помочь .
Хотя та же самая операция позволяет нам загружать кодированные носители в <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>

Развернуть фрагмент

Kaiido
источник

Я наткнулся на ваш ответ, и это решение некоторых моих проблем. Можете ли вы объяснить, как отформатировать URL, указывающий на файл? Я пытался, url('/relativePathToMySvg/mySvg.svg')и это не сработало

Фрэнк

@Frank, согласно спецификациям, использование относительного пути будет относиться к пути вашего файла CSS, то есть, если у вас есть файл CSS /root/css/yourFile.css, то на него yourFile.svgбудет указывать относительный тип funcIRI /root/css/yourFile.svg/. Но, я думаю, я помню, что некоторые ранние UA имели ошибку и сделали ее относительно baseURI документа. Поэтому самый безопасный способ - использовать абсолютный путь.

Кайидо

@BoltClock, правда? Я искренне сожалею об этом. Я пришел к этому 6-летнему вопросу от другого и почувствовал, что должен опубликовать его как обновление, но, может быть, мне следует еще яснее сказать, что ваш ответ хорош, и определенно был правильным 6 лет назад? Или, если у вас есть хорошие формулировки, которые могут уместиться в качестве заголовка, не стесняйтесь редактировать мой ответ.

Кайидо

Ницца. Я использовал: content: url('../../images/como-funciona.svg');и это отлично работает

Eliut Islas

Вот ранее пост, который есть ответ мой, что погружения немного глубже в эту тему: это-это возможно , к дисплей-ан-HTML-документа или в HTML-фрагмент, подверженной CSS-контента

Асон

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

Пример из проекта CSS Generated Content for Paged Media :

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

.runner { 
  position: running(heading);
}

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

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

золь
источник

Эй, не могли бы вы объяснить это немного больше. Я интересуюсь вашей теорией, но не могу заставить ее исполниться. Как бы я добавил, скажем, тег привязки, используя этот метод или div.

Нил

проблема в том, что в настоящее время в основном нет поддержки браузера, но специальные средства визуализации HTML реализуют ее в соответствии со спецификацией. Следующая не очень хорошая новость заключается в том, что не существует хорошей реализации с открытым исходным кодом; большинство из них - продукты SaaS, такие как princexml.com .

Sol