:: sebelum / :: selepas - Trik CSS

The ::beforedan ::afterpseudo-elemen dalam CSS membolehkan anda untuk memasukkan kandungan ke halaman tanpa ia perlu berada dalam HTML. Walaupun hasil akhirnya sebenarnya tidak ada di DOM, ia muncul di halaman seolah-olah, dan pada dasarnya akan seperti ini:

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

 before after

Satu-satunya sebab untuk menggunakan satu dari yang lain adalah:

Anda mahu kandungan yang dihasilkan datang sebelum kandungan elemen, secara kedudukan.
Yang ::afterkandungan juga "selepas" dalam sumber-perintah, maka ia akan meletakkan di atas :: sebelum ini, jika disusun di atas satu sama lain secara semula jadi.

Perhatikan bahawa kandungannya masih berada di dalam elemen tempat mereka digunakan. Jenis penamaan terasa seperti mereka mungkin datang, ya tahu, sebelum atau sesudah elemen, tetapi sebenarnya sebelum atau sesudah kandungan lain di dalamnya.

Nilai untuk kandungan boleh:

Rentetan: content: "a string"; - watak khas perlu dikodkan khas sebagai entiti unicode. Lihat halaman glyphs.
Imej: kandungan: url (/path/to/image.jpg.webp); - Gambar dimasukkan pada dimensi yang tepat dan tidak dapat diubah ukurannya. Oleh kerana perkara seperti kecerunan sebenarnya adalah gambar, elemen pseudo boleh menjadi kecerunan.
Tiada apa-apa: kandungan: “”; - Berguna untuk perbaikan jelas dan memasukkan gambar sebagai gambar latar (tetapkan lebar dan tinggi, dan bahkan dapat mengubah ukurannya dengan ukuran latar belakang).
Pembilang: content: counter(li); - Sangat berguna untuk menggayakan senarai sehingga: penanda muncul.

Perhatikan bahawa anda tidak dapat memasukkan HTML (sekurang-kurangnya, itu akan diberikan sebagai HTML). content: "";

: vs ::

Setiap penyemak imbas yang menyokong sintaks dua titik dua (: :) CSS3 juga hanya menyokong sintaks (:), tetapi IE 8 hanya menyokong kolon tunggal, jadi buat masa ini, disarankan untuk menggunakan kolon tunggal untuk sokongan penyemak imbas terbaik.

:: adalah format yang lebih baru yang bertujuan untuk membezakan kandungan semu dari pemilih pseudo. Sekiranya anda tidak memerlukan sokongan IE 8, sila gunakan kolon dua.

Berkaitan

::Barisan pertama
::surat pertama
Pemilih Kelas Pseudo

Sokongan Penyemak Imbas

Masalah kecil:

Firefox 3.5- tidak akan membenarkan kedudukan unsur-unsur semu secara mutlak.
Dalam Opera 9.2, ruang kosong selalu dipaparkan dalam elemen pseudo ini seolah-olah preteks.
IE 8 tidak menyokong z-index pada mereka