伪元素不显示框阴影后

Question

我试图做一个metro-like菜单，并当用户悬停在每个瓷砖我希望它显示一个盒子阴影。现在我得到了它的工作，但我读了它更好地使用它在::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>

Answer 2

您已经创建了伪元素，但你有没有给它任何高度或宽度。首先你必须给它显示。

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; 
}