css - テーブルセルの ::after の位置が Firefox で機能しませんか?

Question

次のコードは、親要素の幅の 100% にまたがる疑似要素を作成する必要があります。ただし、これは Firefox では機能しませんが、Chrome では機能します。Firefox は.parent'sを無視するようposition:relativeです。これはバグですか？

HTML

<div class="parent">

</div>

CSS

.parent{
  background:red;
  width:100px;
  height:100px;
  position:relative;
  display:table-cell;
}

.parent:after{
left:0;
  content:'';
  right:0;
  top:10px;
  height:20px;
  background:green;
  position:absolute;
}

ライブデモ

この画像をクロムで見る

そして今、この結果をfirefoxで見てください

---

Answer 1

可能であれば、display:table-cellをblockまたはに変更して、inline-blockこのエラーを修正してください。position:relativeまたは、親を に変更しabsoluteます。

Answer 2

与えるwidth

  .parent:after{
      left:0;
      content:'';
      right:0;
      top:10px;
      width:100px;
      height:20px;
      background:green;
      position:absolute;
}