Xin xem http://jsfiddle.net/ZWw3Z/Làm thế nào yếu tố giả có thể phát hiện chiều cao của phần tử không giả?
<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;
}
Về cơ bản, chiều cao của phần tử giả là quá lớn. Tôi muốn nó có cùng chiều cao với phần tử p. Làm thế nào tôi có thể làm điều đó?
Để người đọc trong tương lai, hiệu ứng là để có một thanh xuất hiện trên văn bản ở phía bên tay trái. Để thực hiện điều này, OP đã sử dụng position: absolute; trên phần tử psuedo (p:before).
Lỗi OP gặp phải là do phần tử psuedo đang xử lý <body> làm điểm vị trí tương đối - để khắc phục, chỉ cần đặt position: relative; trên thẻ <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>
Bạn không cần một thùng chứa bên ngoài. Bản thân 'p' chứa' p: before', do đó bạn có thể đơn giản tương đối định vị 'p' thay thế. – BoltClock
Tôi đã không suy nghĩ, cảm ơn vì đã bắt được nó. Đã cập nhật câu trả lời. – Ben