Usando: before pseudoelemento CSS para adicionar imagem ao modal

Eu tenho uma classe CSS Modalque está absolutamente posicionada, indexada com z acima de seu pai e bem posicionada com JQuery. Quero adicionar uma imagem circunflexa (^) ao topo da caixa modal e estava olhando para usar o :beforepseudo seletor CSS para fazer isso de forma limpa.

A imagem precisa ser absolutamente posicionada e indexada em Z acima do modal, mas não encontrei nenhuma maneira de adicionar a classe apropriada à imagem no contentatributo:

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

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

Segunda melhor opção - posso adicionar os estilos embutidos no atributo de conteúdo?

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

:aftere :beforecomcontent estão bem para usar como eles são suportados em todos os principais navegadores diferente do Internet Explorer, pelo menos, 5 versões para trás. O Internet Explorer tem suporte completo na versão 9+ e suporte parcial na versão 8.

É isso que você está procurando?

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

Se não, você pode explicar um pouco melhor?

ou você pode usar jQuery, como Joshua disse:

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

Você deve usar o atributo background para dar uma imagem a esse elemento, e eu usaria :: after ao invés de before, dessa forma ele já deve estar desenhado em cima do seu elemento.

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

1.esta é minha resposta para o seu problema.

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

O conteúdo e o anterior são altamente confiáveis ​​entre os navegadores. Eu sugeriria continuar com jQuery para fazer isso. Não tenho certeza do que você está fazendo para descobrir se essa cenoura precisa ser adicionada ou não, mas você deve ter uma ideia geral:

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