Kullanarak: kalıba görüntü eklemek için CSS sözde öğesinden önce

ModalKesinlikle konumlandırılmış, ebeveyninin üzerinde z-endeksli ve JQuery ile güzel bir şekilde konumlandırılmış bir CSS sınıfım var . Kalıcı kutunun üstüne bir düzeltme resmi (^) eklemek istiyorum ve :beforebunu temiz bir şekilde yapmak için CSS sözde seçiciyi kullanmaya bakıyordum .

Görüntünün kesinlikle modal üzerinde konumlandırılması ve z-endekslenmesi gerekiyor, ancak contentöznitelikteki görüntüye uygun sınıfı eklemenin herhangi bir yolunu bulamadım :

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

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

İkinci en iyi seçenek - stilleri içerik özelliğine satır içi ekleyebilir miyim?

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

:afterve :beforeile contentInternet Explorer dışındaki tüm büyük tarayıcılarda desteklendikleri için en az 5 sürüm geriye dönük olarak kullanılabilir. Internet Explorer, 9+ sürümünde tam desteğe ve sürüm 8'de kısmi desteğe sahiptir.

Aradığınız bu mu?

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

Değilse, biraz daha iyi açıklayabilir misin?

ya da Joshua'nın dediği gibi jQuery'yi kullanabilirsiniz:

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

Bu elemana bir resim vermek için background özniteliğini kullanmalısınız ve ben önce yerine :: after kullanacağım, bu şekilde zaten elemanınızın üstüne çizilmelidir.

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

1. bu, sorunun için cevabım.

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

İçerik ve öncesi, tarayıcılar arasında son derece güvenilmezdir. Bunu başarmak için jQuery'ye bağlı kalmanızı öneririm. Bu havucun eklenmesi gerekip gerekmediğini anlamak için ne yaptığınızdan emin değilim, ancak genel fikri almalısınız:

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