longueur trop grande sur un souligné avec transition (menu SHRINK)

**el_debutanti** · 20/04/2022, 11h33

Bonjour,
J'ai une navbar avec animation de souligné blanc (car caractères blancs) lors du :hover. RAS
Lorsque le menu devient SHRINK, les caractères deviennent noirs et le souligné noir.
Le problème, c'est que la transition se fait sous toute la navbar (de droite à gauche, mais à un left bien inférieur à 0, et pas mot par mot (onglet par onglet).
Je vous donne mes CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#menutop.menu-shrink {
	height: 80px;
}
#menutop.menu-shrink:hover {
	background-color: rgba(255,255,255,0.8);
}
#menutop.menu-shrink .navbar-brand {
	width: 75px;
	padding-left: 4px;
	padding-top: 4px;
}
#menutop nav .navbar-nav {
	padding-top:15px !important;
}
#menutop.menu-shrink nav .navbar-nav a {
	font-size: 1.3em;
	color: black;
}
 
#menutop.menu-shrink nav .navbar-nav a::before {
    content:"";
    width:0;
    height:2px;
    background: black;
    position:absolute;
    bottom:0;
    left:50% !important;
    right:0 !important;
    transition:all 0.2s;
}
#menutop.menu-shrink nav .navbar-nav:hover a::before {
    min-width:100%;
    left:0 !important;
}