简体   繁体   中英

How to make border transition go left to right(the border appears on hover)

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

https://jsfiddle.net/de36a287/

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM