僞元素如何檢測非僞元素的高度？

請參閱http://jsfiddle.net/ZWw3Z/僞元素如何檢測非僞元素的高度？

<p>Text text text text text text text...</p>

p { 
    background-color: blue; 
} 

p:before { 
    content: ''; 
    position: absolute; 
    width: 10px; 
    height: 100%; 
    background-color: red; 
}

從本質上講，僞元素的高度太大。我希望它具有與p元素相同的高度。我怎樣才能做到這一點？

來源

2011-09-19 Randomblue

對於未來的讀者，其效果是在左側的文本上顯示一個條。爲了實現這一點，OP在psuedo元素上使用position: absolute;（p:before）。

誤差運算是遇到是因爲僞元素被處理<body>，因爲它的相對位置點 - 修復，只需設置position: relative;在<p>標籤。

p { 
 
    position: relative; 
 
    background-color: blue; 
 
    padding-left: 10px; 
 
    /* change the padding to something larger 
 
    than the width of the :before element to 
 
    add spacing for text 
 
    */ 
 
} 
 

 
p:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 10px; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<p>text... text...</p>

來源

2011-09-19 18:21:24 Ben

你並不需要一個外部容器。 'p'本身包含'p：before'，所以你可以簡單地相對定位'p'。 – BoltClock

我沒有想到，謝謝你的發現。更新了答案。 – Ben

僞元素如何檢測非僞元素的高度？

回答

相關問題