เพียงแค่สงสัยว่ามันเป็นไปได้ที่จะทำให้ CSS contentใส่รหัส html แทน string บน: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 และแก้ไข dataURI 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 สำหรับโมดูลร่างPaged Media :

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

.runner { 
  position: running(heading);
}

.runner สามารถเป็นองค์ประกอบใดก็ได้และheadingเป็นชื่อที่กำหนดเองสำหรับสล็อต

แก้ไข:เพื่อชี้แจงโดยทั่วไปไม่มีการสนับสนุนเบราว์เซอร์ดังนั้นสิ่งนี้ส่วนใหญ่มีไว้เพื่ออ้างอิงในอนาคต / นอกเหนือจาก 'คำตอบที่เป็นประโยชน์' ที่ให้ไว้แล้ว