Как псевдоэлемент может определить высоту не-псевдоэлемента?

См. 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. Как я могу это сделать?

Ответы

Ответ 1

Для будущих читателей эффект состоял в том, чтобы панель отображалась над текстом с левой стороны. Для этого OP использовал position: absolute; в элементе psuedo (p:before).

Ошибка OP была связана с тем, что psuedo-элемент обрабатывал <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>