Pseudo-elemen after

Pseudo-elemen after menyisipkan teks selepas elemen. Digunakan hanya bersama-sama dengan sifat content, yang menetapkan teks yang perlu disisipkan.

Sintaks

csspemilih::after {
  content: 'teks';
}

Contoh

Mari kita buat agar apabila penuding dihalakan ke li, teks disisipkan pada penghujungnya:

html<ul>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
</ul>

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

Результат:

Contoh

Pelbagai gaya boleh diaplikasikan pada teks yang disisipkan. Mari kita warnakan teks ini, sebagai contoh, dengan beberapa warna:

html<ul>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
  <li>item senarai</li>
</ul>

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

Результат:

Lihat juga