Html After元素行为不正确

出于某种原因，我的一段代码似乎无法正常工作。我只有after元素有问题。在标题上方悬停时，应从左上角和右下角绘制两条线。正如您可能看到的，它们都从左上角开始，但从右上角开始

问题是代码似乎是正确的，但仍然无法按应有的方式工作

这里有一个

注意悬停时前后元素之间的差异。当它们不悬停时，它们位于其线将离开区块的位置。 当它们悬停时，它们位于另一侧

h1:before{
    bottom: 0;
    right: 0;
}

h1:hover:before{
    top: 0;
    left: 0;
}

h1:after{
    top: 0;
    left: 0;
}

h1:hover:after{
    bottom: 0;   /*not working*/
    right: 0;    /*not working*/
}

---

要从左：0转到右：0还需要添加左：自动悬停，否则元素将是左和右0

非常感谢！我完全忘记了它是一个绝对定位的元素。现在一切都有意义了