a tag without line-decoration in Bootstrap 4 : <p>I would like to have a link that looks just like plain text except for the cursor by using as few css as possible.</p>

<p>The problem: <code>&lt;a&gt;</code> has a blue color (that darkens when hovered) and also has underline on hover. I want it to look like plain text (black without underline).</p>

<p>By using the Bootstrap class "text-dark" I managed to get rid of the blue color.
But how do I get rid of the underline (text-decoration) <strong>without writing css</strong>?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.no-underline:hover {
  text-decoration: none;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt;


&lt;span&gt;Standard text&lt;/sapn&gt;
&lt;hr&gt;
&lt;a href="#"&gt;Standard a tag. Different colors and underline on hover&lt;/a&gt;
&lt;hr&gt;
&lt;a href="#" class="text-dark"&gt;a tag with text-dark class. Note underline on hover&lt;/a&gt;
&lt;hr&gt;
&lt;a href="#" class="text-dark no-underline"&gt;a tag with text-dark class and css to disable underline on hover&lt;/a&gt;</code></pre>
</div>
</div>
</p>
