Hover area - bottom border

Hi! I have the following navigation menu: https://jsfiddle.net/LauraStoian/5kmo0v7e/.

The links of the pages have each a hover which consists of a bottom border. The problem is that the hover activates just when the mouse is on the text, instead of working in the whole surrounding area ( full area up and down and a few px in right and left).

The navigation is built with the flexbox. I tried to apply the border to the #A_3 and although the hover area expands, the border-bottom moves too low. Is like a paradox because either I have to move the border too low so that the hover area is bigger or keep the border where it should be but the hover works only on text.

This is because the border is after padding and hover works only on the padding zone. I saw on other websites that this style is done with the after pseudoelement, I tried to do it this way, but it didn’t work.

So, my question is, how can I expand the hover zone while keeping the border-bottom just below the text?