web-dev-qa-db-fra.com

CSS: Pseudo-éléments: avant et: après avoir hérité de la largeur / hauteur de l'élément d'origine

J'utilise les pseudo-éléments css: avant et: après pour donner un effet de retrait sur certaines de mes images sur un site Web. Cependant, sans spécifier la largeur et la hauteur, celles-ci ne s'afficheront pas. Cela me ferait spécifier une largeur et une hauteur fixes pour chacune des images, ce qui, je suppose, fonctionnerait pour une page Web statique.

Cependant, comme ces images sont générées dynamiquement avec jQuery et soumises par l'utilisateur, les images diffèrent en largeur et en hauteur à chaque fois. Maintenant, je pourrais probablement résoudre ce problème avec Javascript en obtenant la largeur de l'image et en la transmettant à: avant, mais cela semble être trop de travail pour quelque chose comme ça.

Ma question est de savoir s'il existe un moyen de le faire avec CSS uniquement, d'avoir la largeur de contenir l'image transmise au: avant sur ce <li>, de sorte que les pseudo-éléments: avant et: après héritent de la largeur et la hauteur de l'élément d'origine.

La mise en page de base:

<ul>
   <li>
       <img src="foo" />
   </li>   
</ul>    

# css style simplefied
ul{ float:left; list-style:none}
li{float:left;}
li img{float:left}
li:before{
          content:"":
          position:relative;
          position:absolute;
          float:left;   
          box-shadow:0 1px 2px rgba(0,0,0,0.4);   

}

PS: la compatibilité requise n'est valable que pour les navigateurs Webkit mobiles.

MODIFIER

Je pourrais par exemple ajouter des lignes au CSS avec Javascript en utilisant les lignes suivantes:

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';    
document.styleSheets[1].insertRule('ul li:before { height: ' +  heightImg+ '; }', 0);

Mais cela signifierait que je devrai également travailler avec des identifiants dynamiques. Ce qui ne sera pas difficile, mais je me demande simplement s'il n'y a pas de seul moyen CSS.

csspseudo-element
39
Marc Hoogvliet

:before et :after les pseudo-éléments sont boîtes en ligne autant que je sache. Par conséquent, en utilisant display: block; pourrait vous aider.

61
Saeed Neamati
li{
    float:left;
    position:relative;
}
li img{
    float:left;
}
li:before{
    content:" ":
    position:absolute;
    width:100%;
    height:100%
    box-shadow:0 1px 2px rgba(0,0,0,0.4);
}
3
Hugo Silva

il semble content:" ": est important avec display: block

2
srijishks

Essayer:

ul {
    position: relative;
}
li:before {
    content: '\00a0';
    display: block;
    float: left;
    position: absolute;
    height: 100%;
}

Ça a marché pour moi.

0
Piotr Czyż