是否可以在CSS中的:: after伪类上处理mouseout？

如何解决是否可以在CSS中的:: after伪类上处理mouseout？

.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伪元素上，因此有人有想法吗？预先感谢

解决方法

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

<form>
    <input type="text" id="i">
</form>
  
<script>
 document.getElementById('i').addEventListener('keyup',(e) => {
    console.log(e.key); // will return exact pressed key
 });
</script>

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