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;
}
See this images in chrome
and now see this result in firefox