Di CSS2.1, sebuah elemen hanya dapat memiliki paling banyak satu dari semua jenis elemen semu kapan saja. (Ini berarti sebuah elemen dapat memiliki a :before
dan :after
pseudo-element - tidak dapat memiliki lebih dari satu dari setiap jenis.)
Akibatnya, ketika Anda memiliki beberapa :before
aturan yang cocok dengan elemen yang sama, semuanya akan menurun dan diterapkan ke satu :before
elemen semu, seperti pada elemen normal. Dalam contoh Anda, hasil akhirnya terlihat seperti ini:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
Seperti yang Anda lihat, hanya content
deklarasi yang memiliki prioritas tertinggi (seperti yang disebutkan, yang datang terakhir) yang akan berlaku - deklarasi lainnya akan dibuang, seperti halnya dengan properti CSS lainnya.
Perilaku ini dijelaskan di bagian Selektor CSS2.1 :
Elemen semu berperilaku seperti elemen nyata di CSS dengan pengecualian yang dijelaskan di bawah dan di tempat lain.
Ini menyiratkan bahwa penyeleksi dengan pseudo-elemen bekerja seperti penyeleksi untuk elemen normal. Ini juga berarti kaskade harus bekerja dengan cara yang sama. Anehnya, CSS2.1 tampaknya menjadi satu-satunya referensi; baik css3-selector maupun css3-cascade menyebutkan hal ini sama sekali, dan masih harus dilihat apakah itu akan dijelaskan dalam spesifikasi yang akan datang.
Jika sebuah elemen dapat mencocokkan lebih dari satu selektor dengan elemen semu yang sama, dan Anda ingin semuanya diterapkan, Anda perlu membuat aturan CSS tambahan dengan pemilih gabungan sehingga Anda dapat menentukan dengan tepat apa yang harus dilakukan browser pada elemen tersebut. kasus. Saya tidak dapat memberikan contoh lengkap termasuk content
properti di sini, karena tidak jelas misalnya apakah simbol atau teks harus diutamakan. Tetapi pemilih yang Anda perlukan untuk aturan gabungan ini adalah salah satu .circle.now:before
atau .now.circle:before
- pemilih mana pun yang Anda pilih adalah preferensi pribadi karena kedua penyeleksi setara, Anda hanya content
perlu menentukan nilai properti itu sendiri.
Jika Anda masih membutuhkan contoh konkret, lihat jawaban saya untuk pertanyaan serupa ini .
Spesifikasi konten css3 yang lama berisi bagian tentang menyisipkan beberapa elemen ::before
dan ::after
pseudo menggunakan notasi yang kompatibel dengan kaskade CSS2.1, tetapi perhatikan bahwa dokumen tersebut sudah usang - belum diperbarui sejak 2003, dan tidak ada yang memilikinya menerapkan fitur itu dalam dekade terakhir. Kabar baiknya adalah bahwa dokumen yang ditinggalkan secara aktif menjalani penulisan ulang dengan kedok css-content-3 dan css-pseudo-4 . Kabar buruknya adalah bahwa fitur beberapa elemen semu tidak dapat ditemukan di kedua spesifikasi, mungkin karena, sekali lagi, kurangnya minat pelaksana.
circle
dan kelasnow
, kedua aturan tersebut berlaku untuk elemen:before
semu elemen, tetapi CSS normal menyiratkan bahwa hanya satu daricontent
pengaturan yang dapat diterapkan (dengan aturan kaskade normal). Intinya adalah agarcontent
tidak menumpuk.::before
atau::after
pseudo-elemen.Jika elemen utama Anda memiliki beberapa elemen anak atau teks, Anda dapat memanfaatkannya.
Posisikan elemen utama Anda relatif (atau absolut / tetap) dan gunakan keduanya: sebelum dan: setelah diposisikan absolut (dalam situasi saya, itu harus absolut, tidak tahu tentang milik Anda).
Sekarang jika Anda menginginkan satu pseudo-element lagi, lampirkan absolute: before ke salah satu turunan elemen utama (jika Anda hanya memiliki teks, letakkan dalam sebuah span, sekarang Anda memiliki elemen), yang tidak relatif / absolut / tetap .
Elemen ini akan mulai bertindak seolah-olah pemiliknya adalah elemen utama Anda.
HTML
CSS
sumber
.modal:first-child:before { …
Saya telah menyelesaikan ini menggunakan:
Menggunakan jenis font "font awesome 5 free" untuk ikonnya, dan setelah itu, kita harus menentukan font yang akan kita gunakan lagi karena jika kita tidak melakukannya, navigator akan menggunakan font default (times new roman atau semacamnya ini).
sumber