title: Underline for entire line when using span and position:absolute
body: <p>Below is the html I am using to display some content. I have learnt that an underline wouldn't be visible in hyperlinks when using <code>"position:absolute"</code>, which is why I have added the style <code>text-decoration: underline;</code> , for the span elements.</p>
  
  <p>However, I am getting underlines where the span element displays a text. I would link to have a underline the entire line containing all the text's of span.</p>
  
  <p>Please check the snippet and output here . However, I need a underline on entire line.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;style type="text/css"&gt;
  a {
      text-decoration: underline; }
  &lt;/style&gt;
  
  &lt;a href="http://www.w3schools.com/html/" &gt;
  &lt;div class="sans-serif" &gt;
  &lt;font style="font-weight:normal; font-size:12.00pt; font-style:normal; "&gt;
  &lt;span style="position:absolute; top:94px; left:42px;text-decoration: underline;  "&gt;Text2&lt;/span&gt;
  &lt;span style="position:absolute; top:94px; left:213px;text-decoration: underline; "&gt;Text3&lt;/span&gt;
  &lt;span style="position:absolute; top:94px; left:418px;text-decoration: underline; "&gt;Text4&lt;/span&gt;
  &lt;/font&gt;
  &lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would need the below output, but using span elements as shown above using position:absolute</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;style type="text/css"&gt;
  a {
      text-decoration: underline; }
  &lt;/style&gt;
  
  &lt;a href="http://www.w3schools.com/html/" &gt;
  &lt;div class="sans-serif" &gt;
  &lt;font style="font-weight:normal; font-size:12.00pt; font-style:normal; "&gt;
  Text 2&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Text 3&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Text4
  &lt;/font&gt;
  &lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>