How to align the pseudo element to the bottom

Question

I am trying to create an shadow effect when mouseover on the table row. I am using the pseudo class :after to create the shadow effect on the bottom of the table row. I am able to get the shadow effect, but I want to align the pseudo element to the bottom of the row hovered, right now the shadow is appearing on the top of the row and its not taking the exact width of the row, its taking the full width of the screen.

How can I resolve this?

Here is what I have done.

Code:

.highlight {
  box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .5)!important;
  background: none;
}

table {
  border-collapse: collapse !important;
}

table td {
  padding: 10px
}

table tr:hover::after {
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
  content: "";
  height: 1px;
  left: 15px;
  position: absolute;
  width: 100%;
  z-index: 1 !important;
}

<div>
  <table border="1px">
    <tr>
      <td></td>
      <td bgcolor="grey">Header1</td>
      <td bgcolor="grey">Header2</td>
      <td bgcolor="grey">Header3</td>
      <td bgcolor="grey">Header4</td>
      <td bgcolor="grey">Header5</td>
    </tr>
    <tr>
      <td bgcolor="grey" class="myCell">Row1</td>
      <td class="myCell">
        cell
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
    </tr>
    <tr>
      <td bgcolor="grey" class="myCell">Row2</td>
      <td class="myCell">
        cell
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
    </tr>
    <tr>
      <td bgcolor="grey" class="myCell">Row3</td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
      <td class="myCell">
        f
      </td>
    </tr>
  </table>
</div>

Answer 1

You can apply the pseudo element to td and set this to position:relative. With bottom:0the shadow gets applied to the bottom.

.highlight {
  box-shadow:0 2px 18px 0 rgba(0,0,0,.5)!important;
  background: none;
}

table{
  border-collapse: collapse !important;
}

table td{
  padding: 10px;
  position: relative;
}

table tr:hover td::after {
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.5);
  content: "";
  width: 100%;
  position: absolute;
  height: 1px;
  bottom: 0;
  z-index: 1 !important;
}

<table border="1px">
  <tr>
      <td></td>
      <td bgcolor="grey">Header1</td>
      <td bgcolor="grey">Header2</td>
      <td bgcolor="grey">Header3</td>
      <td bgcolor="grey">Header4</td>
      <td bgcolor="grey">Header5</td>
  </tr>

  <tr>
      <td bgcolor="grey" class="myCell">Row1</td> 
      <td class="myCell">
        cell 
      </td> 
      <td class="myCell">
         f 
      </td> 
      <td class="myCell">
         f 
      </td> 
      <td class="myCell">
         f 
      </td> 
      <td class="myCell">
         f 
      </td> 
  </tr>

  <tr>
      <td bgcolor="grey" class="myCell">Row2</td> 
      <td class="myCell">
        cell 
      </td> 
      <td class="myCell">
       f   
      </td> 
      <td class="myCell">
        f 
      </td> 
      <td class="myCell">
         f
      </td> 
      <td class="myCell">
         f
      </td> 
  </tr>


  <tr>
      <td bgcolor="grey" class="myCell">Row3</td> 
      <td class="myCell">
         f
      </td> 
      <td class="myCell">
         f 
      </td> 
      <td class="myCell">
          f
      </td> 
      <td class="myCell">
          f
      </td> 
      <td class="myCell">
         f
      </td> 
  </tr>
</table>