如何移动文本装饰下划线属性使其不会破坏文本答案

【问题标题】：How can I move text decoration underline property so that It's not break text如何移动文本装饰下划线属性使其不会破坏文本
【发布时间】：2020-08-09 00:49:59
【问题描述】：

当我使用“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>

【问题讨论】：

改用底部边框
您的代码在这里运行良好，但如果它不能在您的最后运行，那么您可以按照上面的建议在悬停时使用border-bottom。

标签： html css css-transitions

【解决方案1】：

您可以通过将 text-decoration-skip-ink 设置为 none 来更改此行为以强制下划线/上划线穿过字符。

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

【讨论】：

这是一个很好的答案，可能是最好和最正确的答案，但不幸的是，一些流行的浏览器不支持:(
感谢您的评论。我可以通过任何 css 属性将其向下移动吗
不，我们不能仅使用 CSS 来控制文本装饰线的移动。
感谢您的回答。它在所有浏览器中都能正常工作吗？

【解决方案2】：

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

【讨论】：

请检查@anubhav use border-bottom
我知道这一点。这是由 text-decoration 属性完成的吗
现在检查一次@anubhav
text-underline-position: under; 使用这个

【解决方案3】：

第一种解决方案：

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

【讨论】：

我知道这一点。这是由 text-decoration 属性完成的吗
是的，你可以这样做。我更新了我的答案。请立即检查。