Question

请参阅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元素具有相同的高度。我怎么能这样做？

Answer 1

对于未来的读者，效果是在左侧的文本上显示一个条。为实现此目的，OP在psuedo元素（position: absolute;）上使用p:before。

错误OP遇到的原因是因为psuedo元素将<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>

伪元素如何检测非伪元素的高度？

1 个答案: