chejnik chejnik - 8 days ago 9
CSS Question

w3.css with no underline

I am using w3.css. I am not sure why some of my hyperlinks are underlined and some are not.
I would like to achieve no underline. In the ME follows a short list with hyperlinks.

<ul class="w3-ul w3-white">
<a class="" href="./proverb_1.php?answer=yes&answered=20">
<li class="w3-hover-yellow w3-white w3-xlarge w3-padding-16 w3-text-black w3-left-align w3-border-top w3-border-bottom">
<span class="">Malý trs trávy často převrátí i těžký náklad.</span>
<br></li></a>
<a class="" href="./proverb_1.php?answer=yes&answered=54">
<li class="w3-hover-yellow w3-white w3-xlarge w3-padding-16 w3-text-black w3-left-align w3-border-top w3-border-bottom">
<span class="">Ranní ptáče dál doskáče.</span>
<br></li></a>
<a class="" href="./proverb_1.php?answer=yes&answered=43">
<li class="w3-hover-yellow w3-white w3-xlarge w3-padding-16 w3-text-black w3-left-align w3-border-top w3-border-bottom">
<span class="">Nejlepší je mluvit pravdu.</span>
<br></li></a>
</ul>

Answer

it because w3.css don't use text-decoration:none for a tag. You can create a custom class for the a tag Example (check the a tag class w3.a) or you can use css selector for clear the underline

  ul.w3-ul a{
  text-decoration:none;
  }
  
   
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
 <ul class="w3-ul w3-white">
  <a class="" href="./proverb_1.php?answer=yes&answered=20">
    <li class="w3-hover-yellow w3-white w3-xlarge w3-padding-16 w3-text-black w3-left-align w3-border-top w3-border-bottom"> 
<span class="">Malý trs trávy často převrátí i těžký náklad.</span>
<br></li></a>   
<a class="" href="./proverb_1.php?answer=yes&answered=54">
    <li class="w3-hover-yellow w3-white w3-xlarge w3-padding-16 w3-text-black w3-left-align w3-border-top w3-border-bottom"> 
<span class="">Ranní ptáče dál doskáče.</span>
<br></li></a>  
<a class="" href="./proverb_1.php?answer=yes&answered=43">
    <li class="w3-hover-yellow w3-white w3-xlarge w3-padding-16 w3-text-black w3-left-align w3-border-top w3-border-bottom"> 
<span class="">Nejlepší je mluvit pravdu.</span>
<br></li></a>    
</ul>
</body>

Comments