<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
我希望它与元素具有相同的高度。我怎样才能做到这一点?
<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
我希望它与元素具有相同的高度。我怎样才能做到这一点?
对于未来的读者来说,效果是在左侧的文本上方出现一个条形图。为了实现这一点,OPposition: absolute;
在伪元素 ( p:before
) 上使用。
OP遇到的错误是因为伪元素将其<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>