Hay una mesa. Estoy agregando a través de filas JS. A nuevas filas a través ::after agregar una cruz "Eliminar fila"; el pseudoelemento está absolutamente posicionado, pero la primera vez que se agrega una nueva fila, el borde de la tabla se desplaza. No puedo entender por qué, porque el pseudo-elemento ::after está absolutamente posicionado y no debería afectar la representación de los elementos.
const tbody = document.querySelector('tbody'); document.querySelector('button').addEventListener('click', event => { const tr = tbody.querySelector('tr:last-child').cloneNode(true); tbody.appendChild(tr); }); table { border: 1px solid #000; border-spacing: 10px; } td { border: 1px solid #000; height: 50px; width: 50px; } tr:nth-child(n + 3) { position: relative; } tr:nth-child(n + 3)::after { color: #f00; content: '×'; display: block; font-weight: bold; height: 10px; width: 10px; position: absolute; top: 30%; right: -3%; } <table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> <br> <button>Add row</button>Se supone que los pseudoelementos creados por ::after se comportan como si se hubiera insertado un elemento secundario real en el elemento. Las filas de la tabla tienen celdas de tabla como elementos secundarios, por lo que básicamente creó una celda de tabla adicional.
Coloque el pseudo elemento en la última celda de la tabla en su lugar:
tr:nth-child(n + 3) td:last-child::after { ... }