我需要在多个li先隐藏:after这个元素，在鼠标悬停显示的示例

你可以使用CSS的:hover伪类选择器来实现这个效果。首先，将所有的li元素设置为相对定位（position: relative）。然后，在每个li元素中添加一个隐藏的:after伪元素，并将其设置为绝对定位（position: absolute）。最后，在:hover伪类选择器中将:after伪元素的display属性设置为block，以显示它。

以下是一个示例代码：

HTML：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS：

ul li {
  position: relative;
}

ul li:after {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

ul li:hover:after {
  display: block;
}

在上面的代码中，我们首先将所有的li元素设置为相对定位，这是为了使后面的绝对定位的:after伪元素能够相对于它们的父元素进行定位。然后，我们在每个li元素中添加一个隐藏的:after伪元素，并将其设置为绝对定位。在这个示例中，我们将:after元素的样式设置为半透明的黑色背景。最后，在:hover伪类选择器中，我们将:after元素的display属性设置为block，以显示它。当鼠标悬停在li元素上时，将会显示一个半透明的黑色覆盖层。