#top-menu .current-menu-item a::before, #top-menu .current_page_item a::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; } #top-menu li a:before { content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 50%; background: #15bf86; /*** COLOR OF THE LINE ***/ height: 3px; /*** THICKNESS OF THE LINE ***/ -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #top-menu li a:hover { opacity: 1 !important; } #top-menu li a:hover:before { right: 0; } #top-menu li li a:before { bottom: 10%; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter