Javascript 网站上出现的文物：CSS问题

我已经被这件事难住了一段时间，如果可能的话，我真的很想得到一些建议。下面是有问题的违规网站：

我遇到的问题是这些按钮：在上面的示例中，“Devpost”按钮不应该只出现在它旁边，它还应该有另一个按钮“Github”（如下图所示）

现在，当div位于正确的位置时，按钮实际上出现在屏幕顶部（作为人工制品）：

这显然不是网站的正确功能。就我尝试过的事情而言，我尝试将相应div（

链接效果

）的CSS更改为使用

位置：绝对

，而不是

位置：相对

——虽然这修复了伪影，但破坏了按钮动画（这没有用）

现在，我注意到的一件事是，这似乎只有在幻灯片动画（魔兽世界套装的一部分）完成后才会出现在Chrome上。如果向下滚动到“我的项目”部分并刷新页面，您将注意到该按钮仅在动画完成时消失（以下是一个在动画中间正确使用格式的示例）：

这让我相信动画完整功能正在进行的一项更改导致了这个错误，但不幸的是，我无法准确地指出它。我曾尝试使用chrome动画工具深入了解这些变化，但我是一名网络开发/调试新手，没有取得多大进展

考虑到这一点，我将非常感谢您对如何解决这些文物的任何建议！此外，如果可以解释错误，那就太好了——因为我想知道将来如何避免它！谢谢你所做的一切

我相信下面是相关的代码，但我不确定这是否真的是问题所在

.link-effect {
        width: 100%;
        height: 42px;
        display: inline-block;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

.link-effect a {
    margin: 0 auto;
    color: rgba(230, 126, 34, 1);
    position: relative;
    padding: 16px 7px;
    border-top: 2px solid rgba(230, 126, 34, 0);
    border-bottom: 2px solid rgba(230, 126, 34, 0);
    transition: padding .3s, border-color .3s;
    font-size: 14px;
    -webkit-transform: translate3d(0, 0, 0);
}

.link-effect a::after,
.link-effect a::before {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    max-height: 0;
    color: rgba(230, 126, 34, 0);
    content: attr(data-text);
    transition: max-height .3s, border-color 0s
}

.link-effect a:focus,
a:hover {
    padding: 5px 7px;
    border-color: rgba(230, 126, 34, 1);
    outline: 0
}

.link-effect a::before {
    top: 0;
    border-left: 2px solid rgba(230, 126, 34, 0)
}

.link-effect a::after {
    padding: 5px;
    border-right: 2px solid rgba(230, 126, 34, 0)
}

希望这有帮助：）

---

链接和图像，无代码-fail@JaromandaX：我非常高兴能把代码包括进来，我只是觉得人们这些天都是从网站上看的——没关系，一秒钟让我把它拿出来！最少的、可验证的和完整的示例，最好不是每一行代码：如果您希望我们只检查源代码并对其进行处理，那么您也可以让我们访问它，以便我们可以对其进行处理。抱歉，我错误地认为人们只是浏览了一下网站。我已经上传了我认为相关的代码，但是我对这个很陌生，我不确定！你好，罗伯特，谢谢你的回复。所以我真的试过了！现在，我遇到的问题是，当我能够将按钮放在正确的位置时，动画停止工作（完全停止），出于某种原因，悬停在一个按钮上会触发另一个按钮的动画（似乎出现了一些意外的额外填充）。你没有遇到这个问题吗？我认为这是因为动画的实现方式。您正在使用

链接效果a

上的

填充

来调整“条”的位置。我将保持到伪元素的转换。可能需要使用

位置：相对
将
包装在另一个元素（a
？）中，以解决问题并保留动画。这很有效（我甚至不需要更改边距或填充）！我能问一下是什么让你意识到这就是问题所在吗？你是如何调试这个的？非常感谢你的帮助，罗伯特-非常感谢@伊姆兰艾哈迈德嘿，伊姆兰，我真的不知道是什么导致了这个错误。这只是一种直觉，尝试另一种解决方案可以解决它。因此，基本上，请尝试并出错：）
.link-effect {
    width: 100%;
    height: 42px; // remove this
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    display: flex; // add this
    justify-content: center; // add this
}

.link-effect a {
    margin: 0 5px; // change this
    color: rgba(230, 126, 34, 1);
    position: relative;
    padding: 5px 7px; // change this
    border-top: 2px solid rgba(230, 126, 34, 0);
    border-bottom: 2px solid rgba(230, 126, 34, 0);
    transition: padding .3s, border-color .3s;
    font-size: 14px;
    -webkit-transform: translate3d(0, 0, 0);
}