Ran*_*lue 19 css pseudo-element
<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元素具有相同的高度.我怎样才能做到这一点？
小智 27
对于未来的读者来说,效果是在左侧的文本上显示一个条.为了实现这一点,OP正在使用position: absolute;psuedo元素(p:before).
错误OP是遇到了,因为伪元素被处理的<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>