对伪元素的悬停效果不起作用

Question

我想在我的flex元素上提供悬停效果，该效果会滑下黑色的“窗帘”，但由于某种原因，未创建:: after元素，因此悬停不起作用。创建:: after元素时我做错了什么？

.flex-element {
  flex: 1 0 20%;
  margin-right: 10rem;
  z-index: 1;
  width: 20rem;
  position: relative;
  &:last-child {
    margin-right: 0;
  }
  &:hover {
    cursor: pointer;
  }
  &::after {
    content: "";
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.712);
    z-index: 2;
  }
  &:hover:after {
    animation: .5s rollDown ease-in-out forwards;
  }
}

@keyframes rollDown {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}

<div id="categories" class="container">
  <div class="headline">
    <h1>Categories</h1>
  </div>
  <div class="flex">
    <img class="flex-element" src="images/img1.png ">
    <img class="flex-element" src="images/img2.png">
    <img class="flex-element" src="images/img3.png">
  </div>
</div>

Answer 1

据我所知，您可以按照以下步骤实现它。

.flex{
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.flex-element {
	margin-right: 30px;
	z-index: 1;
	position: relative;
}
.flex-element:hover {
	cursor: pointer;
}
.flex-element:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	background-color: #000;
	z-index: 0;
	opacity: 0.5;
	transition: 0.3s ease-in-out all;
	-webkit-transition: 0.3s ease-in-out all;
	-moz-transition: 0.3s ease-in-out all;
	-ms-transition: 0.3s ease-in-out all;
}
.flex-element:hover:before{
	height: 100%;
}

<div id="categories" class="container">
	<div class="headline">
		<h1>Categories</h1>
	</div>
	<div class="flex">
		<div class="flex-element"><img src="https://dummyimage.com/300"></div>
		<div class="flex-element"><img src="https://dummyimage.com/300"></div>
		<div class="flex-element"><img src="https://dummyimage.com/300"></div>
	</div>
</div>

Answer 2

是否可以在伪元素内设置内容的样式：“”？就像我放置内容：“领结”一样，如果我可以将其垂直居中。 （文本对齐有效，但是当我尝试垂直居中时出现问题）