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 indent 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 permettrait de 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 sont soumises par l'utilisateur, les images diffèrent à chaque fois en largeur et en hauteur. Maintenant je peux probablement corrigez cela avec Javascript en récupérant la largeur de l'image et en la passant sur le :before, mais il semble que c'est trop de travail pour quelque chose comme ça.
ma question Est de savoir s'il y a un moyen de le faire uniquement avec CSS, pour que la largeur du contenant de l'image soit transmise au :before sur ce
La ligne de base de mise en page:
<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é nécessaire est seulement pour les navigateurs WebKit mobiles.
EDIT
je pourrais par exemple ajouter des lignes à la 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 voudrait dire que je vais aussi devoir travailler avec les identifiants dynamiques. Ce qui ne sera pas difficile, mais je me demande s'il n'y a pas un seul moyen.
5 réponses
:before et :after Les pseudo-éléments sont inline boîtes autant que je sache. Par conséquent, en utilisant display: block; pourrait vous aider.
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);
}
Essaie:
ul {
position: relative;
}
li:before {
content: 'a0';
display: block;
float: left;
position: absolute;
height: 100%;
}
Il a travaillé pour moi.