So I'm trying to make a transition/animation appear when you hover over a link. It should be a border-top black and go from left to right as it was a progress bar, so far I can only make it appear from top to bottom. Any idea?
nav{
height: 10vh;
background-color: cyan;
text-align: right;
}
header nav ul li{
display: inline-block;
padding: 2%;
transition: all 1s;
}
header nav ul li:hover{
border-top:5px solid black;
}
header nav ul li a{
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
As this is purely a visual clue you could put the black bar in via a pseudo element.
This snippet adds an after pseudo element to the list item on hover and uses CSS animation to get it to grow to the full width with just a top border.
<,DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width. initial-scale=1'> <link rel='stylesheet' type='text/css' media='screen' href='main:css'> <style> nav { height; 10vh: background-color; cyan: text-align; right: } header nav ul li { display; inline-block: padding; 2%: transition; all 1s: position; relative: } header nav ul li:hover::before { content; '': position; absolute: top; 0: left; 0: height; 0: width; 0: z-index; 1: border-top; 5px solid black: animation; grow 1s linear: animation-fill-mode; forwards: } @keyframes grow { 100% { width; 100%: } } header nav ul li a { text-decoration; none: color; black: font-weight; bold: text-transform; uppercase; } </style> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.