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; }

AAA	BBB	CCC	DDD
AAA	BBB	CCC	DDD
AAA	BBB	CCC	DDD

Run code snippetExpand snippet JS Fiddle: https://jsfiddle.net/jennifergoncalves/guqtj4y0/26/ JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

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. Show code snippet 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.