>我正在开发一个包含许多锚链接的网站，其中一些与文本本身的颜色不同。对于 90% 的开发来说，这不是问题，我继续为常规链接和背景图像使用标准文本装饰，并为彩色链接提供线性渐变，以便我可以将它们动画化为突出显示
我注意到这些彩色链接在移动设备上根本不起作用。当然，没问题，我会尝试另一种方法。我尝试了很多方法。
首先是将所有内容切换到边框轮廓，这时我意识到我喜欢常规链接上较粗的线条。不幸的是，这不起作用，因为链接在段落中是内联的，并且更改行高(我用它来更改文本下方下划线的距离)破坏了段落。
我目前正在尝试的是引入一个 1x2 像素的图像并将其用作带有 repeat-x 的背景图像，它看起来很棒！在桌面上。Chrome和Firefox for Mobile(我尝试过的那些)都没有显示下划线。
我已经输入了所有媒体查询，并针对每种尺寸的屏幕调整了这些内容，但仍然没有运气
TL;DR - 我正在使用背景图像为文本添加下划线，它在桌面上很棒，但在移动设备上根本不显示。关于下划线方法的任何建议或提示肯定会起作用？
这是我正在使用的下划线代码：
a {
color: var(--font-color-main);
text-decoration: none;
background-image: url('../assets/blackunderline2.png');
background-position: 0 22px;
background-repeat: repeat-x;
}
这是我在彩色高光上使用的(在移动设备上也不起作用，如果可行，我很乐意将其切换到像素方法！
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
/* Firefox 3.6 - 15 */
/* Opera 11.1 - 12 */
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, orange), color-stop(90%, transparent));
background-image: linear-gradient(orange 80%, transparent 90%);
background-image: linear-gradient(orange 80%, transparent 90%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 7px 8px;
因此，我将手机连接到开发PC上的开发工具，发现(由于我现在不确定的原因)尽管桌面媒体查询很好，但移动设备上的行高仅在移动设备上发生变化。
这意味着我对背景图像所做的下划线太低而不可见，所以我把它调高了，现在我们是金色的！