 <p>The other answer I gave employs the <code>::after</code> <em>pseudo-element</em> and works for inline links on a single line.</p> <p>This answer, for <strong>multi-line links</strong>, uses a similar method, but this time, the <code>::after</code> <em>pseudo-element</em> covers the entire <code>a</code> element (rather than simply being positioned at the bottom of it) and has an alternating repeating background of lines - which ends up looking like one underline for every line in the <code>a</code> element:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { width: 400px; background-color: rgba(0, 0, 0, 1); } a { position: relative; display: inline-block; cursor: pointer; font-size: 16px; line-height: 20px; } a:nth-of-type(1) { color: rgba(255,0,0,1); } a:nth-of-type(2) { color: rgba(0,255,0,1); } a:nth-of-type(3) { color: rgba(127,191,255,1); } a::after { content: ""; position: absolute; top: 0; left: 0; z-index: 12; display: block; width: 400px; height: 100px; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 19px, currentColor 19px, currentColor 20px); opacity: 0; transition: all 0.4s ease-out; } a:hover::after { opacity: 1; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a&gt;The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown The quick brown&lt;/a&gt; &lt;a&gt;fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over fox jumps over &lt;/a&gt; &lt;a&gt;the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. the lazy dog. &lt;/a&gt;</code></pre> </div> </div> </p>