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:0 0 0 2px 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:hover th:not([rowspan]),
tr.hl:hover td {
  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;
}

thead th {
  background: white;
  box-shadow: 0 0 0 2px white;
}

<table id="player1">
  <thead>
    <tr style="color: red">
      <th colspan=5 style="text-align: right">Player 1's Payoffs </th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th colspan=3 style="font-size: smaller; text-align: center">Player 2's actions</th>
    </tr>


  </thead>
  <tr style="text-align: center">
    <th colspan=2></th>
    <th class="col">d</th>
    <th class="col">e</th>
    <th class="col">f</th>
  </tr>

  <tr style="color: red" class="hl">
    <th rowspan=3 class="rotate" style="font-size: smaller;">
      <div>Player 1's actions</div>
    </th>
    <th class="row">a</th>
    <td>10</td>
    <td>4</td>
    <td>16</td>
  </tr>

  <tr style="color: red" class="hl">
    <th class="row">b</th>
    <td>20</td>
    <td>8</td>
    <td>0</td>
  </tr>
  <tr style="color: red" class="hl">
    <th class="row">c</th>
    <td>4</td>
    <td>18</td>
    <td>12</td>
  </tr>

</table>