如何将伪元素对齐到底部

Question

我试图在鼠标悬停在表格行上时创建阴影效果。我正在使用伪类 :after 在表格行底部创建阴影效果。我能够获得阴影效果，但我想将伪元素与悬停的行的底部对齐，现在阴影出现在行的顶部，并且它不采用行的确切宽度，它采用屏幕的整个宽度。

我该如何解决这个问题？

这是我所做的。

代码：

.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

您可以将伪元素应用于td并将其设置为position:relative。将bottom:0阴影应用到底部。

.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>