How can the pseudo element detect the height of the non-pseudo element?

Question

Please see http://jsfiddle.net/ZWw3Z/

Text text text text text text text...

p {
    background-color: blue;
}

p:b         


        

Answer 1

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 as it's relative position point - to fix, simply set position: relative; on the

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;
}

text... text...