web-dev-qa-db-fra.com

une balise sans décoration de ligne dans Bootstrap 4

Je voudrais avoir un lien qui ressemble à du texte brut à l'exception du curseur en utilisant le moins de CSS possible.

Le problème: <a> a une couleur bleue (qui s'assombrit en survol) et a également un soulignement en survol. Je veux qu'il ressemble à du texte brut (noir sans soulignement).

En utilisant la classe Bootstrap "text-dark", j'ai réussi à me débarrasser de la couleur bleue. Mais comment puis-je me débarrasser du soulignement (text-decoration) sans écrire 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>
cssbootstrap-4
6
D M

Il existe plusieurs Bootstrap 4 classes qui définissent text-decoration: none. Sans connaître le contexte sémantique du lien, je vous suggère d'utiliser le .btn classe ...

<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

Cependant, il peut y avoir une classe qui fonctionne mieux sémantiquement comme nav-link (navigation intérieure), card-link (à l'intérieur des cartes) ou .breadcrumb-item. Notez également que Bootstrap 4 applique uniquement le soulignement aux liens d'ancrage avec le href="" attribut. Une ancre d'ancrage simple n'aura pas de soulignement en vol stationnaire.

11
Zim

Bootstrap 4 a la classe "text-decoration-none"

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

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

7
Leon