Bisakah saya memiliki beberapa: sebelum pseudo-elemen untuk elemen yang sama?

Apakah mungkin memiliki beberapa :beforepseudo untuk elemen yang sama?

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Saya mencoba menerapkan gaya di atas ke elemen yang sama menggunakan jQuery, tetapi hanya yang terbaru yang diterapkan, tidak pernah keduanya.

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 :beforedan :afterpseudo-element - tidak dapat memiliki lebih dari satu dari setiap jenis.)

Akibatnya, ketika Anda memiliki beberapa :beforeaturan yang cocok dengan elemen yang sama, semuanya akan menurun dan diterapkan ke satu :beforeelemen 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 contentdeklarasi 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 contentproperti 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:beforeatau .now.circle:before- pemilih mana pun yang Anda pilih adalah preferensi pribadi karena kedua penyeleksi setara, Anda hanya contentperlu 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 ::beforedan ::afterpseudo 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.

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

<div class="circle">
    <span>Some text</span>
</div>

CSS

.circle {
    position: relative; /* or absolute/fixed */
}

.circle:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle:after {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

.circle span {
    /* not relative/absolute/fixed */
}

.circle span:before {
    position: absolute;
    content: "";
    /* more styles: width, height, etc */
}

Saya telah menyelesaikan ini menggunakan:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

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).