:: sebelum / :: setelah - Trik CSS

The ::beforedan ::afterpseudo-elemen dalam CSS memungkinkan Anda untuk memasukkan konten ke halaman tanpa itu perlu di HTML. Meskipun hasil akhirnya tidak benar-benar ada di DOM, hasil tersebut muncul di halaman seolah-olah ada, dan pada dasarnya akan seperti ini:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Satu-satunya alasan untuk menggunakan salah satu dari yang lain adalah:

Anda ingin konten yang dihasilkan berada sebelum konten elemen, secara posisional.
The ::afterkonten juga “setelah” dalam sumber-order, sehingga akan posisi di atas :: sebelumnya jika ditumpuk di atas satu sama lain secara alami.

Perhatikan bahwa konten masih berada di dalam elemen tempat mereka diterapkan. Semacam penamaan terasa seperti mereka mungkin datang, ya tahu, sebelum atau sesudah elemen, tapi sebenarnya sebelum atau sesudah konten lain di dalamnya.

Nilai konten dapat berupa:

String: content: "a string"; - karakter khusus perlu dikodekan secara khusus sebagai entitas unicode. Lihat halaman mesin terbang.
Gambar: content: url (/path/to/image.jpg.webp); - Gambar disisipkan pada dimensi yang tepat dan tidak dapat diubah ukurannya. Karena hal-hal seperti gradien sebenarnya adalah gambar, elemen semu bisa menjadi gradien.
Tidak ada: konten: ""; - Berguna untuk membersihkan dan menyisipkan gambar sebagai gambar latar belakang (mengatur lebar dan tinggi, dan bahkan dapat mengubah ukuran dengan ukuran latar belakang).
Penghitung: content: counter(li); - Sangat berguna untuk daftar gaya sampai: penanda muncul.

Perhatikan bahwa Anda tidak dapat memasukkan HTML (setidaknya, yang akan dirender sebagai HTML). content: "";

: vs ::

Setiap browser yang mendukung titik dua ganda (: :) sintaks CSS3 juga hanya mendukung sintaks (:), tetapi IE 8 hanya mendukung titik dua tunggal, jadi untuk saat ini, disarankan untuk hanya menggunakan titik dua tunggal untuk dukungan browser terbaik.

:: adalah format lebih baru yang dimaksudkan untuk membedakan konten semu dari selektor-semu. Jika Anda tidak memerlukan dukungan IE 8, silakan gunakan titik dua ganda.

Terkait

::garis pertama
::surat pertama
Pemilih Kelas Pseudo

Dukungan Browser

Masalah kecil:

Firefox 3.5- tidak mengizinkan pemosisian absolut dari elemen semu.
Di Opera 9.2, spasi selalu ditampilkan di dalam elemen semu ini seolah-olah itu adalah preteks.
IE 8 tidak mendukung z-index pada mereka