Position on ::after in table-cell doesn't work in Firefox?

问题:

The following code should create a pseudo-element which spans 100% of its parent element's width. However this won't work in Firefox, it does work in Chrome. Firefox seems to ignore the .parent's position:relative. Is this a bug?

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; } 

Live demo

See this images in chrome

and now see this result in firefox

---

回答1:

If possible, change the display:table-cell to block or inline-block to fix this error. Alternatively, change position:relative on the parent to absolute.

回答2:

Give width

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

文章来源: Position on ::after in table-cell doesn't work in Firefox?