How do you use an inset box-shadow with a background-color with before and after?

Question

When assigning a background color of a table cell on hover, the box shadow is covered.

I have found several questions asking something similar, and my understanding is this is correct behavior: background colors do overlay box shadows.

However, I have seen several answers on here using a "mask" (new element) or :before and :after. The "mask" solution won't work for me as I cannot edit the HTML.

I first tried using borders instead of box shadows, but that moved the rows up and down due to varying heights.

Is this possible? Row should highlight on hover, cell should highlight a different color on hover, row should have 4px border on hover but cells should not shift up/down on hover.

table {
  border-collapse: collapse;
}

table tr:hover {
  box-shadow: inset 0px 0px 0px 4px blue;
  background: red;
}

table tr td {
  border: 1px solid black;
  padding: 5px;
}

table tr td:hover {
  background: yellow;
}

table tr td:hover::before {
  content: '';
  display: block;
  box-shadow: inset 0 0 0 4px blue;
  position: relative;
  top: -5px;
  height: 4px;
}

table tr td:hover::after {
  content: '';
  display: block;
  box-shadow: inset 0 0 0 4px blue;
  position: relative;
  bottom: -5px;
  height: 4px;
}

<table>
  <tbody>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
    </tr>
  </tbody>
</table>

JS Fiddle: https://jsfiddle.net/jennifergoncalves/guqtj4y0/26/

Aaron3219 Aaron3219 · Accepted Answer · 2019-03-22T15:28:48

You didn't specify how you want to accomplish the borders. In your title you box-shadow, but in your description you try to do it with borders:

Row should highlight on hover, cell should highlight a different color on hover, row should have 4px border on hover but cells should not shift up/down on hover.

I didn't do it with an actual border. Instead, I set an outline and just set an outline-offset. This should be what you're looking for.

table {
  border-collapse: collapse;
}

table tr td {
  border: 1px solid black;
  padding: 5px;
}

table tr:hover {
  background: yellow;
  outline: 4px solid blue;
  outline-offset: -4px;
}

table tr td:hover {
  background: red;
}

<table>
  <tbody>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
    </tr>
  </tbody>
</table>

This solution is very convenient because you can pretty easily style an outline. If you, for example, want to add an outline to the specific table cell that is hovered, just add the outline to the cell with the according pseudo-class and you should be ready to go.

How do you use an inset box-shadow with a background-color with before and after?

3 Answers