css a:hover code example
Example 1: how to change hyperlink color in css
a {
background-color: red;
color: white;
padding: 1em 1.5em;
text-decoration: none;
text-transform: uppercase;
}
Example 2: on hover css
.selector {
background-color: black;
}
.selector:hover {
background-color: blue;
}
Example 3: css a href hover effect
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;
}
<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>