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

Question

J'ai une classe CSS Modal qui est en position absolue, z-indexé au-dessus de celle du parent, et bien placé avec JQuery. Je veux ajouter un signe à l'image (^) en haut de la modal box et était à la recherche à l'aide de l' :before CSS pseudo-sélecteur pour faire cela proprement.

L'image doit être en position absolue et z-indexé au-dessus de la modale, mais je n'ai trouvé aucun moyen d'ajouter la classe appropriée de l'image dans l' content d'attribut:

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

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

Deuxième option - puis-je ajouter les styles inline dans le contenu de l'attribut?

Answer 1

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

:after et :before avec content sont d'accord pour utiliser, ils sont pris en charge dans tous les principaux navigateurs 5 versions de retour, sauf dans ie, ce qui est pris en charge 3 versions du dos est sûr à utiliser sur tous les navigateurs.

Est-ce cela que vous cherchez?

.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 non, pouvez-vous nous expliquer un peu mieux?

ou vous pourriez utiliser jQuery, comme Josué dit:

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

Answer 2

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

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

Answer 3

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

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

Answer 4

Le contenu et avant sont très peu fiables entre les navigateurs. Je suggérerais de rester avec jQuery pour accomplir cela. Je ne suis pas sûr de ce que vous faites pour savoir 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' />");