当我使用"Lato Regular 900〃；字体家族，它打破了"；文本装饰：下划线"属性。有什么解决方案可以从底部移动下划线属性吗。这样就不会打断文本的下划线。如图所示，在此处输入图像描述
我想要这张照片在此处输入图像描述
我的html代码是`
<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>`
您可以通过将文本装饰跳过墨迹设置为none来更改此行为，以强制下划线/上划线穿过字符。
a:hover {
text-decoration: underline;
text-decoration-skip-ink: none;
}
使用text-underline-position: under;
<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标记应用填充。
<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>第二个解决方案：
请在悬停时尝试在a标记上使用text-underline-position属性。
<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;
text-underline-position: under;
}
</style>
</head>
<body>
<a href='' onmouseover>UI/UX DESIGNING</a>
</body>
</html>