Utilizzo: prima dello pseudo elemento CSS per aggiungere un'immagine al modale

Ho una classe CSS Modalche è assolutamente posizionata, z-indexed sopra il suo genitore e ben posizionata con JQuery. Voglio aggiungere un'immagine accento circonflesso (^) nella parte superiore della casella modale e stavo cercando di utilizzare il:before pseudo selettore CSS per farlo in modo pulito.

L'immagine deve essere posizionata in modo assoluto e z-indexed sopra il modale, ma non ho trovato alcun modo per aggiungere la classe appropriata all'immagine contentnell'attributo:

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

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

Seconda migliore opzione: posso aggiungere gli stili in linea nell'attributo di contenuto?

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

:aftere :beforecon contentsono bene utilizzare come sono supportate in tutti i principali browser diverso da Internet Explorer almeno 5 versioni indietro. Internet Explorer ha il supporto completo nella versione 9+ e un supporto parziale nella versione 8.

È questo quello che stai cercando?

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

In caso contrario, puoi spiegare un po 'meglio?

oppure potresti usare jQuery, come ha detto Joshua:

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

Dovresti usare l'attributo background per dare un'immagine a quell'elemento, e io userei :: after invece di prima, in questo modo dovrebbe essere già disegnato sopra il tuo elemento.

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

1.questa è la mia risposta al tuo problema.

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

I contenuti e le versioni precedenti sono entrambi altamente inaffidabili nei browser. Suggerirei di attenersi a jQuery per ottenere questo risultato. Non sono sicuro di cosa stai facendo per capire se questa carota deve essere aggiunta o meno, ma dovresti farti un'idea generale:

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