logo标签列表

如何将伪元素对齐到底部？

htmlcss
3
我正在尝试在鼠标悬停在表格行上时创建阴影效果。 我使用伪类: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>

你想要阴影在tr内还是其后面？ - Adam
1个回答
5
你可以将伪元素应用于，并将其设置为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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接