คุณสมบัติ content

คุณสมบัติ content ช่วยให้สามารถแทรก ข้อความที่สร้างขึ้นตามต้องการลงในแท็ก ใช้งาน ร่วมกับ pseudoelement after และ before

Syntax

selector::after {
	content: 'ข้อความ';
}

selector::before {
	content: 'ข้อความ';
}

มาแทรกข้อความเพิ่มเติมที่จุดเริ่มต้นและจุดสิ้นสุดของข้อความในแท็ก li กัน:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li::before {
	content: '!!!';
}
li::after {
	content: '???';
}

สามารถนำสไตล์ต่าง ๆ ไปใช้กับข้อความที่แทรกได้ มาลองเปลี่ยนสีข้อความนี้เป็น สีอื่นดู:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li::before {
	color: red;
	content: '!!!';
}
li::after {
	color: green;
	content: '???';
}