web-dev-qa-db-fra.com

CSS: après que le pseudo-élément n'apparaisse pas sur <img>?

J'ai une image qui sorte de diapositives dans le menu lorsque vous la survolez. Parce qu'il est caché sous le menu, je veux donner un peu de profondeur au bas de l'image en ajoutant un fondu sombre au bas. J'ai pensé que la meilleure façon d'y parvenir est d'utiliser des pseudo-éléments. Je ne me soucie pas vraiment du support IE car c'est un si petit détail.

Alors, voici ce que j'ai:

.header-section .trygg-ehandel-icon {
    position: absolute;
    top: 45px;
    right: 280px;
    z-index: 0;
    display: block;
    // Stripped out some transition style here
  }

  // Here's where the cool stuff begins!
  .header-section .trygg-ehandel-icon::after {
    position: absolute;
    top: 0px; left: 0px;
    height: 20px; width: 20px;
    display: block;
    content: '.';
    z-index: -999999px;
    background: red;
  }

Tout d'abord, je ne sais pas s'il faut utiliser des deux-points ou des deux-points avant "après". J'en ai toujours utilisé un, mais récemment j'ai remarqué que des gens en utilisaient deux, alors comment faire? Soit semble fonctionner!

Vous pouvez le voir en action ici: http://goo.gl/RupQa

C'est le logo jaune qui apparaît au-dessus du menu d'en-tête. Pourquoi ne vois-je pas de boîte rouge 20x20 au-dessus de l'image? Le parent (.trygg-ehandel-icon) est positionné en absolu, donc le pseudo-élément devrait apparaître par rapport à lui, non?

J'essaie de résoudre ce problème depuis plus d'une heure maintenant, des suggestions?

csspseudo-element
22
qwerty

Comme répondu dans cette question .

L'utilisation de before et after psuedo-elements avec la balise img ne fonctionne pas dans la plupart des navigateurs, par conception.

Les balises d'image se ferment automatiquement (<tag />) balises car elles ne contiennent aucun contenu. Puisqu'ils ne contiennent aucun contenu, aucun contenu généré ne peut être ajouté (::after) ou préfixé (::before) au contenu existant.

L'article lié ci-dessus répertorie deux solutions de contournement. La solution de contournement CSS est de nature très hackeuse, tandis que la solution jQuery est beaucoup plus élégante, mais dépend de l'activation de Javascript et de la bibliothèque jQuery.

47
crush