How to do a partial bottom border on your navigation items

The situation: I'm creating a SharePoint site based on a design from a graphic designer.  The design included active/hover properties for the top navigation which included a partial bottom border.

The problem: I was hoping to just use border-bottom to style the hover & active navigation, but that was creating extra-long lines which included the padding for that div.

The solution: After piecing together a few different posts and suggestions, this is what worked: I had to find the style(s) that controlled the hover & selected/active navigation items.  I copied the names of the classes, and pasted them at the end of my CSS, and then gave them the following properties:

#MenuH ul.root>li>ul>li.selected>.menu-item .menu-item-text:after {
height:2px;
background:#FFC836;
width:75%;
display:block;
margin:0px auto;
content:"";
}

Note that my style had a comma-separate list of several different classes.  I added ":after" just before each comma, at the end of only the last part of the style, as above.

The result: Happy clients, and this: