Chỉ cần tự hỏi liệu bằng cách nào đó có thể làm cho thuộc tính CSS contentchèn mã html thay vì chuỗi trên :beforehoặc :aftermột phần tử như:

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

Điều này sẽ khá tiện dụng ... Nó có thể được thực hiện thông qua Javascript nhưng sử dụng css cho việc này thực sự sẽ giúp cuộc sống dễ dàng hơn :)

Thật không may, điều này là không thể. Theo thông số kỹ thuật :

Nội dung được tạo không làm thay đổi cây tài liệu. Cụ thể, nó không được đưa trở lại bộ xử lý ngôn ngữ tài liệu (ví dụ, để sửa chữa lại).

Nói cách khác, đối với các giá trị chuỗi, điều này có nghĩa là giá trị luôn được xử lý theo nghĩa đen. Nó không bao giờ được hiểu là đánh dấu, bất kể ngôn ngữ tài liệu được sử dụng.

Ví dụ: sử dụng CSS đã cho với HTML sau:

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

... sẽ dẫn đến kết quả đầu ra sau:

<a href="#top"> Quay lại </a> Tiêu đề

Như hầu như đã lưu ý trong các nhận xét cho câu trả lời của @ BoltClock, trong các trình duyệt hiện đại , bạn thực sự có thể thêm một số đánh dấu html vào các phần tử giả bằng cách sử dụng ( url()) kết hợp với <foreignObject>phần tử của Svg .

Bạn có thể chỉ định một URL trỏ đến tệp svg thực tế hoặc tạo URL bằng phiên bản dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Nhưng lưu ý rằng nó chủ yếu là một hack và có rất nhiều hạn chế:

• Bạn không thể tải bất kỳ tài nguyên bên ngoài nào từ đánh dấu này (không CSS, không hình ảnh, không phương tiện, v.v.).
• Bạn không thể thực thi tập lệnh.
• Vì đây sẽ không phải là một phần của DOM, cách duy nhất để thay đổi nó là vượt qua đánh dấu dưới dạng dataURI và chỉnh sửa dataURI này document.styleSheets. cho phần này, DOMParservà XMLSerializercó thể giúp đỡ .
• Mặc dù hoạt động tương tự cho phép chúng tôi tải phương tiện được mã hóa url trong <img>các thẻ, nhưng điều này sẽ không hoạt động trong các phần tử giả (ít nhất là cho đến ngày hôm nay, tôi không biết liệu nó có được chỉ định ở bất kỳ nơi nào không nên không, vì vậy nó có thể là một tính năng chưa được thực hiện).

Bây giờ, một bản demo nhỏ của một số đánh dấu html trong phần tử giả:

/* 
**  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>

Trong phương tiện phân trang CSS3, điều này có thể sử dụng position: running()và content: element().

Ví dụ từ dự thảo CSS Generated Content cho Paged Media Module :

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

.runner { 
  position: running(heading);
}

.runner có thể là bất kỳ phần tử nào và headinglà tên tùy ý cho vị trí.

EDIT: để làm rõ, về cơ bản không có hỗ trợ trình duyệt nên điều này chủ yếu là để tham khảo trong tương lai / ngoài 'câu trả lời thực tế' đã được đưa ra.