请参阅
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元素相同的高度。我怎样才能做到这一点？
解决方法
对于未来的读者来说，效果是在左侧的文本上出现一个条形。要做到这一点，OP使用position：absolute;在psuedo元素(p：之前)。
遇到的错误OP是因为psuedo元素正在处理< body>因为它是相对的位置点 – 要修复，只需设置位置：相对;在< 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>
