How to prevent text move to the left after removing left border?

Question

I am making a navigation menu including some menu items. Ideally, when user selects one item, I want a orange border shown on the left of the menu item. My code is here:

<menu>
  <div style="margin-left: -12px; padding-bottom: 10px;">
    <menu_item ng-class="<<show orange border css class:updateBorderItem>>"> </menu-item>
    <menu_item >
        <a ng-click="panel.selectItem(1)" ng-class="'menu_item'" ng-href="www.google.com">Go to Google</a>
    </menu_item>
</div>

... Other items.

Basically, there are 2 menu items inside one "div" represeting one menu item. the first item is only shown when user clicks on this menu item 1.

The problem is that the wording is moving to a little bit to right when user clicks on it and to a little bit to left when user selects other menu item.

Before:

 Go To Google

After:

 | Go To Google

Select another item:

 Go To Google

I want the wording not moving at all. How can I do it ?

  My css:

.updateBorderItem {
    border-left: 3px solid orange;
    padding-left: 8px;
}

Answer 1

You can set a transparent value for your default menu item like:

menu > div {
  display: inline-block;
}
menu > div > menu_item {
  border-left: 3px solid #fff;
  padding-left: 8px;
}
menu > div > menu_item:hover {
  border-left: 3px solid orange;
}

JSFiddle

EDIT

OnClick event jQuery to change the selected menu_item: JSFiddle