Menggunakan: sebelum elemen pseudo CSS untuk menambahkan gambar ke modal

Saya memiliki kelas CSS Modalyang benar-benar diposisikan, diindeks-z di atas induknya, dan diposisikan dengan baik dengan JQuery. Saya ingin menambahkan gambar sisipan (^) ke bagian atas kotak modal dan sedang menggunakan :beforeselektor semu CSS untuk melakukan ini dengan rapi.

Gambar harus benar-benar diposisikan dan diindeks z di atas modal, tetapi saya belum menemukan cara untuk menambahkan kelas yang sesuai ke gambar di contentatribut:

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

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

Opsi terbaik kedua- dapatkah saya menambahkan gaya sebaris di atribut konten?

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

:afterdan :beforedengan contentboleh digunakan karena didukung di setiap browser utama selain Internet Explorer setidaknya 5 versi sebelumnya. Internet Explorer memiliki dukungan penuh pada versi 9+ dan dukungan parsial pada versi 8.

Apakah ini yang kamu cari?

.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;
}

Jika tidak, dapatkah Anda menjelaskan sedikit lebih baik?

atau Anda bisa menggunakan jQuery, seperti yang dikatakan Joshua:

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

Anda harus menggunakan atribut background untuk memberikan gambar ke elemen itu, dan saya akan menggunakan :: setelah daripada sebelumnya, dengan cara ini seharusnya sudah digambar di atas elemen Anda.

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

1. inilah jawaban saya untuk masalah Anda.

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

Konten dan sebelumnya keduanya sangat tidak dapat diandalkan di seluruh browser. Saya menyarankan tetap menggunakan jQuery untuk mencapai ini. Saya tidak yakin apa yang Anda lakukan untuk mengetahui apakah wortel ini perlu ditambahkan atau tidak, tetapi Anda harus mendapatkan gambaran keseluruhan:

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