缺少下劃線<a href> and <u>

Question

I have the following section of code:

echo "<form> 
      <div id=\"error\"align=\"center\">"; 
    echo "You've either key-ed in the wrong <b>username</b> or wrong <b>password</b>. <br/>"; 
    echo "Please contact person in-charged or click <u><a href=\"login.php\">here</a></u> to login again."; 
    echo "</div></form>"; 

and the corresponding CSS:

#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; 
} 

The output:

And shown in the image, there isnt any underline at here which was expected. However, it still able to direct user to another page.

Answer 1

Its because of -webkit-background-clip

How to include text decoration in background-clip: text; effect?

Answer 2

What if you try to manually set the underline in the css

a { 
    text-decoration: underline 
    } 

Answer 3

add a style

a:link { 
text-decoration: underline; 
} 

to your stylesheet. Like @patsy says, somewhere you've removed it. And put it at the end of the stylesheet to be safe (so that if comes after the rule where it was removed).

Answer 4

Add this style

#error a { 
    text-decoration:underline !important; //override 
} 

Answer 5

也許這是您使用的自定義字體的問題，Acens。

嘗試使用另一種方法，一種「黑客」 - 添加到您的CSS：

#error a{ 
    border-bottom:1px solid #000; 
}