19

请参阅http://jsfiddle.net/ZWw3Z/

<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我希望它与元素具有相同的高度。我怎样才能做到这一点？

4

1 回答 1

27

对于未来的读者来说，效果是在左侧的文本上方出现一个条形图。为了实现这一点，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>

于 2011-09-19T18:21:24.670 回答