Wrap nav-menu item in div

Hey all, I need to put stripe with a gradient above the active menu-item in the main nav.

First I thought of trying to solve it with the border property, but as this seems to be not without pitfalls, I’ve been recommended to wrap the item in a div and define the gradient as the div-wrapper’s background image.

However, it’s not quite clear to me how to wrap a div around the <a></a> in the roots main nav.

Can anybody help with this?

You should be able to use a pseudo element (:before or :after) without directly modifying the nav menu markup.