การใช้: ก่อน CSS pseudo element เพื่อเพิ่มรูปภาพลงใน modal

ฉันมีคลาส CSS Modalที่อยู่ในตำแหน่งที่แน่นอนดัชนี z อยู่เหนือระดับแม่และอยู่ในตำแหน่งที่ดีกับ JQuery ฉันต้องการเพิ่มรูปคาเร็ต (^) ที่ด้านบนของกล่องโมดอลและกำลังดูการใช้:beforeตัวเลือกหลอก CSS เพื่อทำสิ่งนี้อย่างหมดจด

รูปภาพจะต้องอยู่ในตำแหน่งที่แน่นอนและดัชนี z เหนือโมดอล แต่ฉันไม่พบวิธีใดในการเพิ่มคลาสที่เหมาะสมให้กับรูปภาพในcontentแอตทริบิวต์:

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

ตัวเลือกที่สองที่ดีที่สุด - ฉันสามารถเพิ่มสไตล์อินไลน์ในแอตทริบิวต์เนื้อหาได้หรือไม่

http://caniuse.com/#search=:after

:afterและ:beforeด้วยความcontentเป็นโอเคที่จะใช้เป็นที่พวกเขากำลังได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญอื่น ๆ ทุกกว่า Internet Explorer อย่างน้อย 5 รุ่นหลัง Internet Explorer มีการสนับสนุนอย่างสมบูรณ์ในเวอร์ชัน 9+ และการสนับสนุนบางส่วนในเวอร์ชัน 8

นี่คือสิ่งที่คุณกำลังมองหาใช่ไหม

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

ถ้าไม่ช่วยอธิบายหน่อยดีกว่าไหม

หรือคุณสามารถใช้ jQuery เช่น Joshua กล่าวว่า:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

คุณควรใช้แอตทริบิวต์พื้นหลังเพื่อให้ภาพกับองค์ประกอบนั้นและฉันจะใช้ :: after แทนก่อนหน้านี้วิธีนี้ควรวาดไว้ด้านบนขององค์ประกอบของคุณแล้ว

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

1. นี่คือคำตอบของฉันสำหรับปัญหาของคุณ

.ModalCarrot::before {
content:'';
background: url('blackCarrot.png'); /*url of image*/
height: 16px; /*height of image*/
width: 33px;  /*width of image*/
position: absolute;
}

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

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");