Usando: antes del pseudo elemento CSS para agregar una imagen a modal

Tengo una clase CSS Modalque está absolutamente posicionada, indexada en z por encima de su padre y bien posicionada con JQuery. Quiero agregar una imagen de intercalación (^) en la parte superior del cuadro modal y estaba buscando usar el :beforepseudo selector de CSS para hacer esto limpiamente.

La imagen debe estar absolutamente posicionada e indexada en z sobre el modal, pero no he encontrado ninguna forma de agregar la clase adecuada a la imagen en el contentatributo:

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

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

Segunda mejor opción: ¿puedo agregar los estilos en línea en el atributo de contenido?

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

:aftery :beforecon contentson bien usar a medida que se admiten en todas las principales navegador que no sea Internet Explorer, al menos, 5 versiones posterior. Internet Explorer tiene soporte completo en la versión 9+ y soporte parcial en la versión 8.

¿Es esto lo que estás buscando?

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

Si no es así, ¿puede explicarnos un poco mejor?

o puede usar jQuery, como dijo Joshua:

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

Deberías usar el atributo de fondo para darle una imagen a ese elemento, y yo usaría :: after en lugar de before, de esta manera ya debería estar dibujado encima de tu elemento.

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

1.Esta es mi respuesta a tu problema.

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

Tanto el contenido como antes son muy poco fiables en todos los navegadores. Sugeriría seguir con jQuery para lograr esto. No estoy seguro de lo que está haciendo para averiguar si esta zanahoria debe agregarse o no, pero debería tener la idea general:

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