HTML / CSS: aumenta el tamaño del borde sin afectar la altura

También puede intentarlo estableciendo una altura específica y configurando box-sizing:border-box

tr td {
  border-bottom: 1px solid grey;
  height:30px;
  box-sizing:border-box;
}

tr:hover td {
   border-bottom: 2px solid red;
}

<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>

Cuando aumenta el tamaño, su línea se vuelve más alta (debido a su nuevo borde) si solo desea aumentar la altura sin cambiar el tamaño de la línea, haga lo siguiente:

Tr: hover td {border-bottom: 2px solid red; altura: su altura anterior-1}

Puede usar outline para lograr lo mismo, pero el esquema se aplica a elemento completo

Entonces puede usar box-shadow para crear un esquema en un lado. Al igual que outline, box-shadow no cambia el tamaño del modelo de caja.

tr td {
  box-shadow: 0 -1px 0 #000 inset;
}

tr:hover td {
  box-shadow: 0 -2px 0 #f00 inset;
}

<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

Puede usar box-shadow para crear un estilo de borde que no afecte a la altura del elemento.

Puede disminuir el relleno inferior, lo que disminuirá la altura de td y no afectará su altura de td.

tr td {
  border-bottom: 1px solid grey;
}

tr:hover td {
   border-bottom: 2px solid red;
   padding-bottom: 0px;**strong text**
}

<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>