Elemt Pseudo ::after CSS

Definisi dan Penggunaan

CSS ::after Pseudo-element digunakan untuk memasukkan beberapa konten setelah konten elemen yang ditentukan.

Gunakan content Atribut menentukan konten yang akan dimasukkan. Nilai content dapat berupa:

• String: content: "Hello world!";
• Gambar: content: url(myimage.jpg);
• Tidak ada konten: content: none;
• Penhitungan: content: counter(li);
• Petik: content: close-quote;
• Nilai atribut: content: " (" attr(href) ")";

Tips:Perhatikan, konten yang dimasukkan masih berada di dalam elemen yang ditentukan. Konten yang dimasukkan akan ditambahkan setelah konten lain di dalam elemen.

Gunakan ::before Masukkan beberapa konten sebelum konten elemen yang ditentukan.

Contoh

Contoh 1

Masukkan sebuah string setelah konten elemen <p>:

p::after {
  content: " - Ingat ini";
}

Coba Sendiri

Contoh 2

Masukkan sebuah string setelah konten elemen <p> dan atur gaya konten yang dimasukkan:

p::after {
  content: " - Ingat ini";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

Coba Sendiri

CSS Syntax

::after {
  pernyataan css;
}

Detil Teknologi

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung pseudo-element ini penuhnya.

Halaman yang berhubungan

Tutorial:CSS Element Pseudo

Referensi：Elemt Pseudo ::before CSS