CSS Nav Element Hover With Bottom Border -

I am trying to replicate the following effect:

I set the background color for the hover But how can I lower the border and the small arrow?

Thank you.

You can use only one code for the border, in which you set limits Color needs to be updated. . Tabs A: Hover {background color: # 444; Border-down-color: # 484; Color: # 484; }

Anything for an arrow / diamond / triangle: something that you can not easily setup, but easy solution to add background instead of using plain HTML / CSS Will happen. / P>

Update: