Bootstrap 4中没有行装饰的标签

Question

我希望通过使用尽可能少的 css 来创建一个除了光标之外看起来像纯文本的链接。

问题：<a> 有蓝色（悬停时变暗），悬停时也有下划线。我希望它看起来像纯文本（没有下划线的黑色）。

通过使用 Bootstrap 类“text-dark”，我设法摆脱了蓝色。 但是我如何摆脱下划线（文本装饰）不写 css？

.no-underline:hover {
  text-decoration: none;
  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<span>Standard text</sapn>
<hr>
<a href="#">Standard a tag. Different colors and underline on hover</a>
<hr>
<a href="#" class="text-dark">a tag with text-dark class. Note underline on hover</a>
<hr>
<a href="#" class="text-dark no-underline">a tag with text-dark class and css to disable underline on hover</a>

Answer 1

Bootstrap 4 具有“text-decoration-none”类

<a href="#" class="text-decoration-none">no underline</a>

https://getbootstrap.com/docs/4.3/utilities/text/#text-decoration

Answer 2

有几个 Bootstrap 4 类设置了text-decoration: none。在不知道链接的语义上下文的情况下，我建议你使用.btn 类...

<a href="#" class="text-dark btn">a tag with text-dark class and css to disable underline on hover</a>

https://www.codeply.com/go/CIt6zI0Iqw

但是，可能有一个类在语义上效果更好，例如nav-link（导航内）、card-link（卡片内）或.breadcrumb-item。另外请注意，Bootstrap 4 仅将下划线应用于具有href="" 属性的锚链接。一个简单的锚点在悬停时不会有下划线。