如何移动文本修饰下划线属性使其不会中断文本

Question

因为我使用的是“Lato Regular 900”字体系列，当我将鼠标悬停在文本上时，它会破坏“text-decoration:underline”属性。是否有任何解决方案可以从底部移动下划线属性。这样它就不会破坏文本下划线。如图所示 enter image description here

我想要这张照片 enter image description here

我的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>

`

Answer 1

您可以通过将 text-decoration-skip-ink 设置为 none 来更改此行为以强制 underline/overline 通过字符。

a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

Answer 2

第一个解法：

请尝试使用 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>

Answer 3

使用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>

如何移动文本修饰下划线属性使其不会中断文本

How can I move text decoration underline property so that It's not break text

html

css

css-transitions

如何移动文本修饰下划线 属性 使其不会中断文本

How can I move text decoration underline property so that It's not break text

html

css

css-transitions

如何移动文本修饰下划线属性使其不会中断文本