CSS中是否可以处理::after伪类的mouseout事件？

Question

CSS中是否可以处理::after伪类的mouseout事件？

3

.header-section {
    width: calc(100% / 4);
    padding: 10px 15px;
    user-select: none;
    font-family: 'Nourd', sans;
    font-size: 1.2em;
    text-align: center;
    cursor: pointer;
    border-radius: 15px;
    position: relative;
}

.header-section::after {
    content: "";
    position: absolute;
    bottom: 8%;
    left: 25%;
    width: 0%;
    height: 4px;
    border-radius: 6px;
    background-image: linear-gradient(135deg, rgb(225, 60, 60), rgb(235, 126, 181));
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-name: hss-anim-out;
}

.header-section:hover::after {
    animation-name: hss-anim-over;
}

@keyframes hss-anim-over {
    from {
        width: 0%;
    }
    to {
        width: 50%;
    }
}

@keyframes hss-anim-out {
    from {
        left: 25%;
        width: 50%;
    }
    to {
        left: 75%;
        width: 0%;
    }
}

<div class="header-section header-section-selected">importer</div>
<div class="header-section">mes fichiers</div>

以下是我的代码，以使我的问题更清晰易懂。它实现了我想要的功能，除了在页面加载时运行动画"hss-anim-out"。我搜索了如何覆盖这个问题，但我没有找到真正可行的方法。有人有什么想法来解决这个问题吗？考虑到无法使用JavaScript对伪元素::after上的动画进行操作。先感谢大家。

- Qexat

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

不要使用动画，而是使用过渡效果。一种使用背景属性的想法。

.header-section {
  width: calc(100% / 4);
  padding: 10px 15px;
  user-select: none;
  font-family: 'Nourd', sans;
  font-size: 1.2em;
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  position: relative;
}

.header-section::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 25%;
  right: 25%;
  height: 4px;
  border-radius: 6px;
  background-image: linear-gradient(135deg, rgb(225, 60, 60), rgb(235, 126, 181));
  background-size: 0% 100%;
  background-position:right;
  background-repeat: no-repeat;
  transition:background-size 0.5s, background-position 0s 0s;
}

.header-section:hover::after {
  background-size: 100% 100%;
  background-position:left;
}

<div class="header-section header-section-selected">importer</div>
<div class="header-section">mes fichiers</div>