CSS ::before Pseudo-element

Definisi dan penggunaan

CSS ::before Pseudo-element digunakan untuk sisipkan beberapa konten di sebelum konten elemen yang ditentukan.

Gunakan content Atribut menentukan konten yang disisipkan. Nilai content dapat menjadi：

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

TIPS：Perhatian, konten yang disisipkan masih berada di dalam elemen yang ditentukan. Konten yang disisipkan akan ditambahkan sebelum konten lain di dalam elemen.

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

Contoh

Contoh 1

Sisipkan string di sebelum konten elemen <p>：

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

Cuba sendiri

Contoh 2

Sisipkan string di sebelum konten elemen <p> dan atur gaya konten yang disisipkan：

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

Cuba sendiri

Syarat CSS

::before {
  deklarasi css;
}

Butir teknikal

Pendukung perekap

Nombor dalam tabel menunjukkan versi perekap yang mendukung penuh eleman pseudo ini.

Halaman yang berkaitan

Panduan：Eleman Pseudo CSS

Rujukan：Eleman Pseudo ::after CSS