title: Missing underline for <a href> and <u>
body: <p>I have the following section of code:</p>
  
  <pre><code>    echo "&lt;form&gt;
            &lt;div id=\"error\"align=\"center\"&gt;";
      echo "You've either key-ed in the wrong &lt;b&gt;username&lt;/b&gt; or wrong &lt;b&gt;password&lt;/b&gt;. &lt;br/&gt;";
      echo "Please contact person in-charged or click &lt;u&gt;&lt;a href=\"login.php\"&gt;here&lt;/a&gt;&lt;/u&gt; to login again.";
      echo "&lt;/div&gt;&lt;/form&gt;";
  </code></pre>
  
  <p>and the corresponding CSS:</p>
  
  <pre><code>#error{
  font-family: "Acens", Verdana, Tahoma;
  background: -webkit-linear-gradient(#fff, #2f4f4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
  html, body {
      height:100%;
      width:100%;
      margin:0px;
  }
  body {
      display:table;
      vertical-align:middle;
  }
  form {
      display:table-cell;
      vertical-align:middle;
      width:240px;
      margin:0px auto;
  }
  </code></pre>
  
  <p>The output:</p>
  
  <p><img src="https://i.stack.imgur.com/Xp2Fy.png" alt="enter image description here"></p>
  
  <p>And shown in the image, there isnt any underline at <code>here</code> which was expected. However, it still able to direct user to another page.</p>