While coding, I stumbled upon some trouble regarding tr::after pseudo-element.
Following example works fine and as expected in FF, and not working properly on Edge, Chrome and Chromium. Tested on Windows and Linux.
Chrome: Version 79.0.3945.130 (Official Build) (64-bit)
Firefox: 71.0 (64-bit)
Expected: ::after respects originating element relative position, and starts absolute values from it.
What happends in Chrome/Chromium and Edge: ::after starts positioning from body(or html).
Btw, snippet also renders output as expected. Example source:
<html>
<style>
td{
border: 2px solid red;
}
tr{
position: relative;
}
tr::after{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: 4px solid blue;
}
</style>
<table>
<tbody>
<tr>
<td>1_test</td>
<td>2_test</td>
</tr>
<tr>
<td>1_test</td>
<td>2_test</td>
</tr>
</tbody>
</table>
</html>Firefox:
Chrome:
Directly from W3C:
4.1. Generated Content Pseudo-elements: ::before and ::after
When their computed content value is not none, these pseudo-elements generate boxes as if they were immediate children of their originating element, and can be styled exactly like any normal document-sourced element in the document tree.
What gives? Am I missing something?
