Answers for "css link effects"

CSS
7

text underline hover css

a:hover {
  text-decoration: underline;
}
Posted by: Guest on May-28-2020
14

css how to style a

/*a normal, unvisited link*/
a:link{
	color: green;
}
/*a link the user has visited*/
a:visited{
	color: purple;
}
/*a link when the user mouses over it*/
a:hover{
	color: yellow;
}
/*a link the moment it is clicked*/
a:active{
	color: brown;
}
Posted by: Guest on May-14-2020
0

css a href hover effect

/* css code */
body{
   background-color: #000;
}
.container{            
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
}
li{
   list-style: none;
   display: inline-block;
}
a{
   text-decoration: none;
   color:#fff;
   font-size: 24px;
   padding: 0 20px;
   display: inline-block;
}
.link::after{
   content: '';
   display: block;
   width: 0;
   height: 2px;
   transition: width .3s;
   background-color: #fff;
}
.link:hover::after{
   width: 100%;
   transition: width .3s;
}

/* html code */
<div class="container">
    <li><a href="#" class="link">Home</a></li>
    <li><a href="#" class="link">About Us</a></li>
    <li><a href="#" class="link">Services</a></li>
    <li><a href="#" class="link">Gallery</a></li>
    <li><a href="#" class="link">Contact</a></li>
</div>
Posted by: Guest on November-01-2020

Browse Popular Code Answers by Language