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