Użycie: przed pseudoelementem CSS, aby dodać obraz do modalu

Mam klasę CSS, Modalktóra jest pozycjonowana absolutnie, indeksowana z-indeksem nad jej rodzicem i ładnie pozycjonowana za pomocą JQuery. Chcę dodać obraz karetki (^) na górze pola modalnego i patrzyłem na użycie :beforepseudo selektora CSS, aby zrobić to czysto.

Obraz musi być pozycjonowany absolutnie i indeksowany z-indeksem powyżej modalu, ale nie znalazłem sposobu, aby dodać odpowiednią klasę do obrazu w contentatrybucie:

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

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

Druga najlepsza opcja - czy mogę dodać style bezpośrednio do atrybutu content?

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

:afteri :beforeze contentto w porządku, aby używać jak są one obsługiwane w każdym większym przeglądarki innej niż Internet Explorer w wersji co najmniej 5 powrotem. Internet Explorer ma pełne wsparcie w wersji 9+ i częściowe wsparcie w wersji 8.

Czy tego szukasz?

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

Jeśli nie, czy możesz trochę lepiej wyjaśnić?

lub możesz użyć jQuery, jak powiedział Joshua:

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

Powinieneś użyć atrybutu background, aby nadać obraz temu elementowi, a ja użyłbym :: after zamiast before, w ten sposób powinien być już narysowany na twoim elemencie.

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

1. to moja odpowiedź na twój problem.

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

Treść i wcześniejsze wersje są wysoce zawodne w różnych przeglądarkach. Sugerowałbym pozostanie przy jQuery, aby to osiągnąć. Nie jestem pewien, co robisz, aby dowiedzieć się, czy ta marchewka musi zostać dodana, czy nie, ale powinieneś mieć ogólny pomysł:

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