将伪元素置于其他伪元素之上（css 最佳实践）

Question

我从前端导师那里下载了这个设计来练习我的 css 技能

这是设计的悬停状态

这是我的设计

我用下一个 css 规则得到了这个结果：

const CardImage = styled.div`
  background-image: url(${(props) => props.cardImage || DefaultImage});
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  height: 270px;
  margin-bottom: 25px;
  width: 270px;
  &:hover:after {
    content: url(${ViewIcon});
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 135px);
  }
  &:hover:before {
    position: relative;
    content:'';
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgba(1,153,174,0.5);
  }
`;

我是 css 的新人，我不确定这是否是最好的方法还有其他最好的方法吗？

唯一的方法是使用伪元素？

Answer 1

除非您需要超过 2 个元素或需要使用 JS 移动它们，否则使用 ::before 和 ::after 没有任何问题。
您始终可以创建一个空的 div，使其成为 absolute 并创建类似的效果。（在这种情况下，结果是一样的）

与问题无关，但这里有一些更改以使其更具可读性（个人偏好）并具有更流畅的动画。

const CardImage = styled.div`
  background-image: url(${(props) => props.cardImage || DefaultImage});
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  height: 270px;
  margin-bottom: 25px;
  width: 270px;

  &::before {
    position: relative;
    content:'';
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgba(1,153,174,0.5);
    opacity: 0;
    transition: opacity .3s;
    will-change: opacity;
  }

  &::after {
    content: url(${ViewIcon});
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 135px);
    opacity: 0;
    transition: opacity .3s;
    will-change: opacity;
  }

  &:hover {
   &::before,
   &::after {
     opacity: 1;
   }
  }
`;

将伪元素置于其他伪元素之上（css 最佳实践）

Put a pseudo element over other pseudo element (css best practices)

css

styled-components