CSS ::before Pseudo-element

Definisi dan penggunaan

CSS ::before Pseudo-element digunakan untuk memasukkan beberapa konten di depan konten elemen yang ditentukan.

Pakai 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;
• Penomoran: content: counter(li);
• Petik: content: open-quote;
• Nilai atribut: content: " (" attr(href) ")";

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

Pakai ::after Masukkan beberapa konten di belakang konten elemen yang tertentu.

Contoh

Contoh 1

Masukkan string di depan konten elemen <p>:

p::before {
  content: "Baca ini: ";
}

Coba sendiri

Contoh 2

Masukkan string di depan konten elemen <p> dan atur gaya konten yang dimasukkan:

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

Coba sendiri

Syarat CSS

::before {
  pernyataan css;
}

Detil teknis

Dukungan browser

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

Halaman terkait

Tutorial:Element Pseudo CSS

Referensi:Element Pseudo ::after