html - 伪元素后不显示框阴影

Question

我正在尝试制作一个类似地铁的菜单，当用户将鼠标悬停在每个图 block 上时，我希望它显示一个框阴影。现在我让它工作了，但我读到最好在 ::after 伪元素上使用它会更流畅，但它似乎不起作用。这是 jsFiddle .

p.tile {
  text-align: center;
  padding: 5rem;
  background: #58588E;
  color: white;
  margin: 2rem;
  box-sizing: border-box;
}
p.tile::after {
  content: "";
  box-shadow: 3px 5px 20px -1px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
p.tile:hover::after {
  opacity: 1;
}

<a href="#" class="tile-link">
  <p class="tile">My Progress</p>
</a>

Answer 1

问题是 ::after 伪元素实际上没有任何宽度或高度。可以在容器上设置position:relative，设置position:absolute + left:0, right:0、top:0、bottom:0 技巧使其与容器大小相同。

p.tile {
  text-align: center;
  padding: 5rem;
  background: #58588E;
  color: white;
  margin: 2rem;
  box-sizing: border-box;
  /* new */
  position: relative;
}
p.tile::after {
  content: "";
  box-shadow: 3px 5px 20px -1px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /* new */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
p.tile:hover::after {
  opacity: 1;
}

<a href="#" class="tile-link">
  <p class="tile">My Progress</p>
</a>