border-bottom header navigation

Hi Guys,

Been dealing with a issue for the last days to finally ask for your help.

my navigation items are all “border-bottom” styled.
The thin is that the “border” exceeds the text itself, with minimal to no space between the menu items.

Here’s that part of the css. Any sugestions?
}
.sf-menu a {
border-bottom:4px solid transparent;

}
.sf-menu li.current-menu-item a {
border-bottom: 4px solid #000;

}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
background:#fff;
}
.sf-menu a:hover,
.sf-menu li.current-menu-item a:hover,
.sf-menu li.sfHover ul a:hover,
.sf-menu li.sfHover a {
color:#000;
}
.sf-menu a:hover,
.sf-menu li.sfHover A {

}
.sf-menu {
border-bottom:1px solid #000;
}
.sf-menu li.current-menu-item UL LI A:hover {
border:0;