ตัวเทียม after

ตัวเทียม after แทรกข้อความ หลังองค์ประกอบ ใช้ได้ร่วมกับ คุณสมบัติ content เท่านั้น ซึ่งกำหนดข้อความที่ต้องการแทรก

ไวยากรณ์

cssselector::after {
  content: 'text';
}

ตัวอย่าง

มาทำให้เมื่อเลื่อนเมาส์มาที่ li มีข้อความแทรกที่ท้ายของมัน:

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

cssli:hover::after {
  content: '!!!';
}

Результат:

ตัวอย่าง

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

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

cssli:hover::after {
  color: red;
  content: '!!!';
}

Результат:

ดูเพิ่มเติม