Verwenden von: vor dem CSS-Pseudoelement, um dem Modal ein Bild hinzuzufügen

Ich habe eine CSS-Klasse, Modaldie absolut positioniert, über dem übergeordneten Element z-indiziert und mit JQuery gut positioniert ist. Ich möchte ein Caret-Bild (^) oben in die Modalbox einfügen und wollte dies mit dem :beforeCSS-Pseudo-Selektor sauber machen.

Das Bild muss unbedingt über dem Modal positioniert und z-indiziert sein, aber ich habe keine Möglichkeit gefunden, dem Bild im contentAttribut die entsprechende Klasse hinzuzufügen :

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

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

Zweitbeste Option - kann ich die Stile inline in das Inhaltsattribut einfügen?

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

:afterund :beforemit contentsind in Ordnung zu verwenden, da sie in jedem wichtigen Browser außer Internet Explorer mindestens 5 Versionen zurück unterstützt werden. Internet Explorer bietet vollständige Unterstützung in Version 9+ und teilweise Unterstützung in Version 8.

Ist es das, wonach du suchst?

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

Wenn nicht, können Sie es etwas besser erklären?

oder Sie könnten jQuery verwenden, wie Joshua sagte:

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

Sie sollten das Hintergrundattribut verwenden, um diesem Element ein Bild zu geben, und ich würde :: after anstelle von before verwenden. Auf diese Weise sollte es bereits über Ihrem Element gezeichnet sein.

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

1. Dies ist meine Antwort auf Ihr Problem.

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

Inhalt und früher sind in allen Browsern sehr unzuverlässig. Ich würde vorschlagen, bei jQuery zu bleiben, um dies zu erreichen. Ich bin nicht sicher, was Sie tun, um herauszufinden, ob diese Karotte hinzugefügt werden muss oder nicht, aber Sie sollten die Gesamtidee bekommen:

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