因为我使用的是“Lato常规900”字体家族，当我悬停文本时，它打破了“text-decortion:underline”属性。 有没有从底侧移动underline属性的解决方案。 以便它不会破坏文本下划线。 如图所示，请在此处输入图像描述
我想像这张图片一样在这里输入图片描述
我的html代码是`
null
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
<style>
a:link {
text-decoration: none;
font-family: 'Lato', sans-serif;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<a href='' onmouseover>UI/UX DESIGNING</a>
</body>
</html>null
“
您可以通过将text-decortion-skip-ink设置为none来更改此行为，以强制下划线/上划线遍历字符。
a:hover {text-decoration: underline;text-decoration-skip-ink: none;}
使用text-underline-position:under；
null
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
<style>
a:link {
text-decoration: none;
font-family: 'Lato', sans-serif;
text-underline-position:under;
}
a:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<a href='' onmouseover>UI/UX DESIGNING</a>
</body>
</html>
第一种解决方案:
请尝试使用border-bottom属性css，您可以对a标记应用填充。
null
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap" rel="stylesheet">
<style>
a:link {
text-decoration: none;
font-family: 'Lato', sans-serif;
padding: 2px;
}
a:hover {
border-bottom: 1px solid #0b3a70;
}
</style>
</head>
<body>
<a href='' onmouseover>UI/UX DESIGNING</a>
</body>
</html>