伪元素不显示 box-shadow。

Question

我正试图制作一个类似于Metro的菜单，当用户悬停在每个瓷砖上时，我想要它显示一个盒子阴影。现在我已经使其工作，但我读到最好使用::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>

- Petros Kyriakou

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>

- Stickers

Answer 2

你已经创建了伪元素，但是你还没有给它任何高度或宽度。首先，你必须给它设置 display 属性。

p.tile {
    text-align: center;
    padding: 5rem;
    background: #58588E;
    color: white;
    margin: 2rem;
    box-sizing: border-box;
    position: relative;
}
p.tile::after {
    content: "";
    display: block;
    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;
}

- Farhan Nur Alam