You should set the top
explicitly to 0
for the :after
element, and also remember to set the position:relative
for the div
element so that the absolute positioning works as expected:
.readmore > div::after {
...
top:0;
}
.readmore > div {
...
position:relative;
}
NOTE: The negative margin-top
should be removed. The cause of your problem is you use negative margin-top
(maybe by trial and error until it looks OK in FF), but the position also depends on the top
and left
. The default values of these properties are implemented differently by different browsers, the only solution to set it in order is explicitly set the top
, left
and remember the rule to determine the containing block for the absolute positioned element. (the nearest ancestor which has position as absolute
or relative
).