Position of Menu Headings :hover:: after underline is in wrong place

For my Mobile navbar I have a :hover::after effect that creates a 2px height line underneath the heading when the menu heading is hovered over.

Css problem with area for the effect :hover