ฉันสามารถมีหลายตัว: ก่อนองค์ประกอบหลอกสำหรับองค์ประกอบเดียวกันได้หรือไม่

เป็นไปได้ไหมที่จะมีหลาย:beforeหลอกสำหรับองค์ประกอบเดียวกัน?

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

ฉันพยายามใช้สไตล์ข้างต้นกับองค์ประกอบเดียวกันโดยใช้ jQuery แต่จะใช้เฉพาะรูปแบบล่าสุดเท่านั้นไม่เคยใช้ทั้งสองแบบ

ใน CSS2.1 องค์ประกอบสามารถมีองค์ประกอบหลอกประเภทใดประเภทหนึ่งได้มากที่สุดในเวลาใดก็ได้ (ซึ่งหมายความว่าองค์ประกอบสามารถมีได้ทั้ง a :beforeและ:afterองค์ประกอบหลอก - แต่ต้องมีมากกว่าหนึ่งชนิดไม่ได้)

ด้วยเหตุนี้เมื่อคุณมี:beforeกฎหลายข้อที่ตรงกับองค์ประกอบเดียวกันกฎทั้งหมดจะเรียงซ้อนและนำไปใช้กับ:beforeองค์ประกอบหลอกเดียวเช่นเดียวกับองค์ประกอบปกติ ในตัวอย่างของคุณผลลัพธ์สุดท้ายจะเป็นดังนี้:

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

อย่างที่คุณเห็นมีเพียงการcontentประกาศที่มีลำดับความสำคัญสูงสุด (ตามที่กล่าวไว้การประกาศที่มาสุดท้าย) จะมีผล - การประกาศที่เหลือจะถูกละทิ้งเช่นเดียวกับในกรณีของคุณสมบัติ CSS อื่น ๆ

ลักษณะการทำงานนี้อธิบายไว้ในส่วน Selectors ของ CSS2.1 :

องค์ประกอบหลอกจะทำงานเหมือนกับองค์ประกอบจริงใน CSS โดยมีข้อยกเว้นที่อธิบายไว้ด้านล่างและที่อื่น ๆ

นี่หมายความว่าตัวเลือกที่มีองค์ประกอบหลอกทำงานเหมือนกับตัวเลือกสำหรับองค์ประกอบปกติ นอกจากนี้ยังหมายความว่าน้ำตกควรทำงานในลักษณะเดียวกัน น่าแปลกที่ CSS2.1 ดูเหมือนจะเป็นการอ้างอิงเท่านั้น ทั้งcss3-selectorsหรือcss3-cascade ไม่ได้กล่าวถึงสิ่งนี้เลยและยังคงต้องรอดูว่าจะมีการชี้แจงในข้อกำหนดในอนาคตหรือไม่

หากองค์ประกอบสามารถจับคู่ตัวเลือกมากกว่าหนึ่งตัวกับองค์ประกอบหลอกเดียวกันและคุณต้องการให้ทั้งหมดนำไปใช้คุณจะต้องสร้างกฎ CSS เพิ่มเติมด้วยตัวเลือกแบบรวมเพื่อให้คุณสามารถระบุสิ่งที่เบราว์เซอร์ควรทำในสิ่งเหล่านั้น กรณี ฉันไม่สามารถให้ตัวอย่างที่สมบูรณ์รวมถึงcontentคุณสมบัติที่นี่ได้เนื่องจากยังไม่ชัดเจนเช่นสัญลักษณ์หรือข้อความควรมาก่อน แต่ตัวเลือกที่คุณต้องการสำหรับกฎรวมนี้เป็นอย่างใดอย่างหนึ่ง.circle.now:beforeหรือ.now.circle:before- ตัวเลือกใดก็ตามที่คุณเลือกเป็นความชอบส่วนบุคคลเนื่องจากตัวเลือกทั้งสองมีค่าเท่ากันเป็นเพียงมูลค่าของcontentคุณสมบัติที่คุณจะต้องกำหนดเอง

หากคุณยังต้องการตัวอย่างที่เป็นรูปธรรมโปรดดูคำตอบของฉันสำหรับคำถามที่คล้ายกันนี้

ข้อกำหนดเนื้อหา css3 แบบดั้งเดิมมีส่วนเกี่ยวกับการแทรกหลายองค์ประกอบ::beforeและ::afterหลอกโดยใช้สัญกรณ์ที่เข้ากันได้กับ CSS2.1 cascade แต่โปรดทราบว่าเอกสารนั้นล้าสมัย - ยังไม่ได้รับการอัปเดตตั้งแต่ปี 2546 และไม่มีใครมี ใช้คุณลักษณะนั้นในทศวรรษที่ผ่านมา ข่าวดีก็คือว่าเอกสารที่ถูกทิ้งร้างเป็นอย่างแข็งขันระหว่างการเขียนในหน้ากากของCSS เนื้อหา-3และCSS-หลอก 4 ข่าวร้ายก็คือคุณลักษณะหลอกหลายองค์ประกอบไม่สามารถพบได้ในข้อกำหนดทั้งสองอย่างซึ่งน่าจะเป็นเพราะขาดความสนใจจากผู้ใช้งานอีกครั้ง

หากองค์ประกอบหลักของคุณมีองค์ประกอบลูกหรือข้อความคุณสามารถใช้ประโยชน์ได้

วางตำแหน่งองค์ประกอบหลักของคุณโดยสัมพันธ์ (หรือสัมบูรณ์ / คงที่) และใช้ทั้งก่อนและ: หลังวางตำแหน่งสัมบูรณ์ (ในสถานการณ์ของฉันมันต้องเป็นค่าสัมบูรณ์ไม่รู้เกี่ยวกับของคุณ)

ตอนนี้หากคุณต้องการองค์ประกอบหลอกอีกหนึ่งรายการให้แนบค่าสัมบูรณ์: ก่อนถึงหนึ่งในลูกขององค์ประกอบหลัก (ถ้าคุณมีเพียงข้อความให้วางไว้ในช่วงเวลานี้คุณมีองค์ประกอบ) ซึ่งไม่สัมพันธ์ / สัมบูรณ์ / คงที่ .

องค์ประกอบนี้จะเริ่มทำหน้าที่เหมือนเจ้าของของเขาเป็นองค์ประกอบหลักของคุณ

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 */
}

ฉันได้แก้ไขปัญหานี้โดยใช้:

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

ใช้ตระกูลฟอนต์ "font awesome 5 free" สำหรับไอคอนและหลังจากนั้นเราต้องระบุฟอนต์ที่เรากำลังใช้อีกครั้งเพราะถ้าเราไม่ทำสิ่งนี้ navigator จะใช้ฟอนต์เริ่มต้น (คูณโรมันใหม่หรืออะไรทำนองนั้น นี้).