我使用css偽元素：之前和：之后給一個縮進效果我的一些網站上的圖像。但是，如果不指定寬度和高度，這些將不顯示。這將讓我為每個圖像指定一個固定的寬度和高度，我猜這將適用于一個靜態網頁。

然而，因為這些圖像是動態生成的jQuery和用戶提交，圖像的寬度和高度每次不同。現在我可能可以解決這個與Javascript通過獲取圖像的寬度，并將其傳遞給：之前，但這似乎是這樣的東西太多的工作。

我的問題是如果有一個方法來做到這一點，只有CSS，包含圖像的寬度傳遞到： li&gt ;,因此：before和：after偽元素繼承了原始元素的寬度和高度。

基本頁面布局：

# 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瀏覽器。

編輯

我可以通過使用下面的行添加行到CSS使用Javascript：

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';

document.styleSheets[1].insertRule('ul li:before { height: ' + heightImg+ '; }', 0);

但這意味著我還必須使用動態id。這不會很難，但我只是想知道是否有一個CSS的方式。

總結

以上是生活随笔為你收集整理的html伪元素before占用高度,CSS：伪元素：before和：after从原始元素继承宽度/高度...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。