46

私は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ブラウザーのみです。

編集

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

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

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

4

4 に答える 4

81

:before私が知っている限り、:after疑似要素はインラインボックスです。したがって、を使用display: block;すると役立つ場合があります。

于 2011-07-06T13:25:52.407 に答える
4

content:" ":とともに重要なようです。display: block

于 2016-05-03T02:16:04.720 に答える
1

試す：

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

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

于 2016-07-06T08:27:37.237 に答える