proszę zobaczyć http://jsfiddle.net/ZWw3Z/W jaki sposób pseudo element może wykryć wysokość niepseudonimu?
<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;
}
Zasadniczo wysokość elementu pseudo jest zbyt duży. Chcę, aby miał taką samą wysokość jak element p. Jak mogę to zrobić?
Dla przyszłych czytelników efekt polegał na tym, aby nad tekstem po lewej stronie pojawił się pasek. Aby to osiągnąć, OP używał position: absolute; na elemencie psuedo (p:before).
Wystąpił błąd OP, ponieważ element psuedo traktował <body> jako względny punkt pozycji - aby naprawić, wystarczy ustawić position: relative; na znaczniku <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>
Nie trzeba pojemnika zewnętrznego. Samo 'p' zawiera' p: before', więc możesz po prostu względnie ustawić 'p' zamiast tego. – BoltClock
Nie myślałem, dzięki za złapanie tego. Zaktualizowana odpowiedź. – Ben