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

将来の読者にとっては、左側のテキストの上にバーが表示されるという効果がありました。これを達成するために、OP はposition: 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 に答える