如何可以伪元素检测非伪元素的高度？ [英] How can the pseudo element detect the height of the non-pseudo element?
问题描述
请参阅 http://jsfiddle.net/ZWw3Z/
< p>文字文字文字文字文字文字...< / p>
p {
background-color：blue;
}
p：before {
content：'';
position：absolute;
width：10px;
height：100％;
background-color：red;
}
本质上，伪元素的高度太大。我想要它与 p 元素具有相同的高度。
对未来的读者来说，效果是在左边的文本侧。为了实现这一点，OP在psuedo元素（ p：之前）上使用 position：absolute; p>
OP遇到的错误是因为psuedo-element正在处理< body> ，因为它是相对位置点 - 修复，只需在< p> 标记上设置 position：relative; 。
p {position：relative; background-color：blue; padding-left：10px; / *将填充改变为大于以下内容的宽度：before元素之前添加文本的间距* /} p：before {content：''; position：absolute;左：0; top：0; width：10px;高度：100％; background-color：red;}
< p& ... text ...< / p>
Please see 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;
}
Essentially, the height of the pseudo element is too big. I want it to have the same height as the p element. How can I do that?
To future readers, the effect was to have a bar appear over text on the left-hand side. To accomplish this, the OP was using position: absolute; on the psuedo element (p:before).
The error OP was encountering was because the psuedo-element was treating the <body> as it's relative position point - to fix, simply set position: relative; on the <p> tag.
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>
这篇关于如何可以伪元素检测非伪元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
