Utilisation: avant le pseudo élément CSS pour ajouter une image au modal

J'ai une classe CSS Modalqui est absolument positionnée, z-indexée au-dessus de son parent et bien positionnée avec JQuery. Je veux ajouter une image caret (^) en haut de la boîte modale et je cherchais à utiliser le :beforepseudo-sélecteur CSS pour le faire proprement.

L'image doit être absolument positionnée et indexée en z au-dessus du modal, mais je n'ai trouvé aucun moyen d'ajouter la classe appropriée à l'image dans l' contentattribut:

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

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

Deuxième meilleure option: puis-je ajouter les styles en ligne dans l'attribut de contenu?

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

:afteret :beforeavec contentsont corrects à utiliser car ils sont pris en charge dans tous les principaux navigateurs autres qu'Internet Explorer au moins 5 versions en arrière. Internet Explorer a une prise en charge complète dans la version 9+ et une prise en charge partielle dans la version 8.

Est-ce ce que vous recherchez?

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

Sinon, pouvez-vous expliquer un peu mieux?

ou vous pouvez utiliser jQuery, comme Joshua l'a dit:

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

Vous devriez utiliser l'attribut background pour donner une image à cet élément, et j'utiliserais :: after au lieu d'avant, de cette façon, il devrait déjà être dessiné au-dessus de votre élément.

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

1. c'est ma réponse à votre problème.

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

Le contenu et les versions antérieures ne sont pas très fiables sur tous les navigateurs. Je suggérerais de rester avec jQuery pour y parvenir. Je ne sais pas ce que vous faites pour déterminer si cette carotte doit être ajoutée ou non, mais vous devriez avoir une idée générale:

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