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。在不知道链接的语义上下文的情况下，我建议您使用.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=""属性的锚点链接。一个简单的锚点锚点在悬停时不会有下划线。

Answer 2

Bootstrap 4的类为“ text-decoration-none”

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

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