Element Pseudo ::before CSS

Definisi dan penggunaan

CSS ::before Pseudo-element digunakan untuk memasukkan beberapa konten di depan 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;
• Penomoran: content: counter(li);
• Tanda kutip: 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 sebelum konten lain di dalam elemen.

Gunakan ::after Masukkan beberapa konten di belakang konten elemen yang ditentukan.

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

Syntaks CSS

::before {
  deklarasi css;
}

Detil teknis

Dukungan browser

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

Halaman yang berhubungan

Tutorial:Element Pseudo CSS

Referensi:Element Pseudo ::after