Is it possible to create a link that appears as plain text with no underline, using minimal css?
The issue at hand is that the <a>
tag defaults to a blue color and adds an underline on hover, making it look like a typical link. I would like it to resemble plain black text.
While I was able to remove the blue color by adding the Bootstrap class "text-dark", I am unsure how to eliminate the underline (text-decoration) without having to write additional 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</span>
<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>