¿Cómo puede el pseudo elemento detectar la altura del elemento no pseudo?

ver favor http://jsfiddle.net/ZWw3Z/¿Cómo puede el pseudo elemento detectar la altura del elemento no pseudo?

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

Esencialmente, la altura del elemento seudo es demasiado grande. Quiero que tenga la misma altura que el elemento p. ¿Cómo puedo hacer eso?

Fuente

2011-09-19 Randomblue

Para futuros lectores, el efecto fue que apareciera una barra sobre el texto en el lado izquierdo. Para lograr esto, el OP estaba usando position: absolute; en el elemento psuedo (p:before).

La OP error estaba encontrando era porque el elemento psuedo estaba tratando a la <body> ya que es punto de posición relativa - fijar, simplemente establece position: relative; en la etiqueta <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>

Fuente

2011-09-19 18:21:24 Ben

que no es necesario un recipiente externo. El 'p' en sí mismo contiene' p: before', por lo que simplemente puede posicionar relativamente el 'p'. – BoltClock

No estaba pensando, gracias por captar eso. Respuesta actualizada – Ben

¿Cómo puede el pseudo elemento detectar la altura del elemento no pseudo?

Respuesta

Cuestiones relacionadas