Цікаво, чи можна якось змусити contentвластивість CSS вставити 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, у сучасних браузерах ви можете фактично додати деяку розмітку html до псевдоелементів, використовуючи ( url()) у поєднанні з <foreignObject>елементом svg .

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

Але зверніть увагу , що в основному це хак , і що є багато обмежень:

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

EDIT: для уточнення, в основному не існує підтримки веб-переглядача, тому це здебільшого передбачалося для подальшої довідки / на додаток до вже наведених «практичних відповідей».