I have an HTML table and I want to add an "::after" pseudo-element in a row (tr) so I can have a border that always stays on top.

However, adding the "::after" selector creates a new column in the table, even though the position is set to absolute.

css for the tr:

```css
tbody tr {
  display: table-row;
  position: relative;
}

tbody tr.selected-row::after {
  content: '';

  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  border-width: 2px;
  border-color: rgb(59, 130, 246); 
}

```

[The table rendered][1]
[1]: https://i.stack.imgur.com/3EaSh.png

**Edit:**

I fixed it using the selector
`selected-row > td:first-child::after`.

Basically, it makes sure the pseudo-element is in the first cell of the row, so as long as the cell does not have `position: relative;`, it should work.