基本的に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は擬似要素（p:before）にposition: absolute;を使用していました。
擬似要素が<body>を相対位置として扱っていたためにOPエラーが発生しました。修正するには、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>
あなたは、外部の容器を必要としません。 'p'自体に' p：before'が含まれているので、 'p'を相対的に相対的に配置することができます。 – BoltClock
私は考えていなかった、それをキャッチしてくれてありがとう。更新された答え。 – Ben