web-dev-qa-db-ja.com

CSS：元の要素から幅/高さを継承する疑似要素：beforeおよび：after

私はcss疑似要素：beforeおよび：afterを使用して、Webサイト上の画像の一部にインデント効果を与えています。ただし、幅と高さを指定しないと、これらは表示されません。これにより、各画像に固定幅と高さを指定する必要がありますが、これは静的なWebページで機能すると思います。

ただし、これらの画像はjQueryを使用して動的に生成され、ユーザーが送信するため、画像の幅と高さは毎回異なります。画像から幅を取得して：beforeに渡すことで、おそらくJavascriptでこれを修正できますが、これはこのようなものにはあまりにも多くの作業のようです。

私の質問は、CSSのみでこれを行う方法があり、画像を含む幅をこの<li>の：beforeに渡して、：beforeおよび：after疑似要素が幅を継承するようにするかどうかです元の要素の高さ。

基本的なページレイアウト：

<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：必要な互換性はモバイルWebkitブラウザーのみです。

[〜＃〜] edit [〜＃〜]

たとえば、次の行を使用して、JavaScriptでCSSに行を追加できます。

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

しかし、これは、動的IDを使用する必要があることを意味します。難しいことではありませんが、CSSのみの方法がないのではないかと思っています。

csspseudo-element
39
Marc Hoogvliet

:beforeおよび:after擬似要素はインラインボックス私が知っている限りです。したがって、display: block;はあなたを助けるかもしれません。

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

content:" ":とともにdisplay: blockが重要と思われる

2
srijishks

試してください：

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

それは私のために働いた。

0
Piotr Czyż