如何修复文本式悬停效果的不均匀应用（仅桌面用户 - 网站尚未移动响应式）？

Question

我正在尝试仅使用CSS为我的链接创建滑动下划线悬停效果。效果有效，因此它大多是成功的，但是我想修复的下划线的厚度不平衡，但我不确定如何。

我找到了一种资源，该资源指示我使用背景图像线性梯度设置，以便如果线跨越多行，则效果仍然有效。该资源在这里：

https://nerdcowboy.com/blog/blog/sliding-underined-lindin-links/-links/-links/

我正在使用第三个效果，它将下划线滑入和向外滑动。

该网站尚未移动响应，因此它只会出现在最大化的桌面窗口中。您可以浏览该页面并悬停在链接上，以了解我的意思。请记住，该网站仍然是一个正在进行的工作。这是网页：

https：//sciencexfantasy.com/the-fundamentals.com/the-fundamentals-of - 写作/

这是我用于效果的CSS代码：

article a, .widget a {
    color: #a90000;
    font-weight: bold;
    background-image: linear-gradient(#000000, #000000);
    background-size: 0% .1em;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in-out;
}

article a:hover, .widget a:hover, article a:focus, article a:active, .widget a:focus, .widget a:active {
    background-size: 100% 0.1em;
    background-position-x: 0%;
}

使用0.1EM建议的背景高度建议的资源，以便如果文本大小更改，则可以调整。例如，我尝试使用2PX来纠正此问题，但即使在页面中的整个链接中也适用于不均匀。

有人对此有修复吗？

Answer 1

如果您要更改背景大小，则需要在悬停和元素本身中更改。

这样：

article a:hover, .widget a:hover {
    background-size: 100% 2.5px;
    background-position-x: 0%;
    line-height: 14.5px;
}
article a, article a:visited, .widget a, .widget a:visited {
    color: #a90000;
    font-weight: bold;
    background-image: linear-gradient(#000000, #000000);
    background-size: 0% 2.5px;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in-out;
    line-height: 14.5px;
}

很可能是因为字体大小。您的大多数文本高度是17.6px，只有回到顶部链接是16.6px。那就是我可以看到差异的地方。这也是我为元素和悬停添加线高的原因。如果以上代码不起作用，请尝试以下操作：

1. 尝试将背景size 2.5px更改为0.2CH
2. 尝试从14.5px 到1.8

从我测试的内容中，

正常工作。