Menu icon Foundation
Pseudo Class on active/hover menu items (Zurb F6)

I'm looking to add a line under an active menu item in Foundation 6, and then also on hover. I need it to be only about 50% of menu item width, and also centered under menu item.

I have seen pseudo classes been used for this on other sites but I'm just not sure where to apply positioning and then how to display the line.

Thanks for any advice/help in advance.

Line under menu item (:after)

foundation6pseudonavmenuafterclasscssscsstop-bar

I'm looking to add a line under an active menu item in Foundation 6, and then also on hover. I need it to be only about 50% of menu item width, and also centered under menu item.

I have seen pseudo classes been used for this on other sites but I'm just not sure where to apply positioning and then how to display the line.

Thanks for any advice/help in advance.

Line under menu item (:after)

Rafi Benkual about 3 years ago

Have an example for the code you're working with? Share it with us and we'll help you make this: Blank Codepen with Foundation