是否可以在 CSS 中的 ::after pseudo-class 上处理 mouseout？

Question

.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 伪元素上，所以有人有想法吗？提前致谢

Answer 1

不使用动画，而是使用过渡。使用背景属性的想法

.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>

是否可以在 CSS 中的 ::after pseudo-class 上处理 mouseout？

Is it possible to handle mouseout on ::after pseudo-class in CSS?

html

css

hover

pseudo-element

mouseout