Highlight Column And Row In A Table ::after And ::before Not Work

When the mouse is on a cell, I want to highlight the corresponding column and row. And I also want to highlight the row when the mouse on the letter of the player 1's action, and h

Solution 1:

you need to give a width and increase height and overflow what might overflows.

possible approach

.rotate {
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
  /* if understood */
}

th {
  font-weight: normal;
  align-content: center;
}

td {
  border: 1px black solid;
  padding: 5px;
  text-align: center;
  height: 1.1cm;
  width: 1.1cm;
  box-shadow:0002px white;
}

.col {
  width: 1.1cm;
}

.row {
  height: 1.1cm;
}

.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}

.float-left {
  width: 25%;
  float: left;
}

tr.hl:hoverth:not([rowspan]),
tr.hl:hovertd {
  background-color: yellow;
}

td:hover::before {
  content: '';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  width: 100%;
  top: 0;
}

td:hover::after,
.col:hover::after {
  content: 'j';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  height: 2000%;
  width: 100%;
  bottom: -1000%;
  left: 0;
}

th,
td {
  position: relative;
}

#player1 {
  overflow: hidden;
}

theadth {
  background: white;
  box-shadow: 0002px white;
}

<tableid="player1"><thead><trstyle="color: red"><thcolspan=5style="text-align: right">Player 1's Payoffs </th></tr><tr><thcolspan=2></th><thcolspan=3style="font-size: smaller; text-align: center">Player 2's actions</th></tr></thead><trstyle="text-align: center"><thcolspan=2></th><thclass="col">d</th><thclass="col">e</th><thclass="col">f</th></tr><trstyle="color: red"class="hl"><throwspan=3class="rotate"style="font-size: smaller;"><div>Player 1's actions</div></th><thclass="row">a</th><td>10</td><td>4</td><td>16</td></tr><trstyle="color: red"class="hl"><thclass="row">b</th><td>20</td><td>8</td><td>0</td></tr><trstyle="color: red"class="hl"><thclass="row">c</th><td>4</td><td>18</td><td>12</td></tr></table>