ซีรูดธฺอิลิเมนท์ before
ซีรูดธฺอิลิเมนท์ before แทรกข้อความ
ก่อนธาตุ ใช้ร่วมกับ
คุณสมบัติ content เท่านั้น
ซึ่งกำหนดข้อความที่จะแทรก
วากยสัมพันธ์
ตัวเลือก::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:hover::before {
content: '!!!';
}
:
ตัวอย่าง
สามารถใช้สไตล์ต่างๆ กับข้อความที่แทรกได้ ลองเปลี่ยนสีข้อความนี้เป็น สีสักสีหนึ่ง:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::before {
color: red;
content: '!!!';
}
:
ดูเพิ่มเติม
-
ซีรูดธฺอิลิเมนท์
after,
ซึ่งทำการแทรกข้อความหลังจากข้อความของแท็ก -
ฟังก์ชัน
attr,
ซึ่งรับค่าของแอตทริบิวต์แท็ก -
คุณสมบัติ
counter-increment,
ซึ่งกำหนดการนับเลขอัตโนมัติ
