<h3>Using the <code>font-weight</code> property on <code>hover</code> states</h3>

<ul>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Second Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
</ul>

<h3>Testing with an "active" class on the first link:</h3>

<ul>
  <li><a class="active" href="#">First Item</a></li>
  <li><a href="#">First Item</a></li>
  <li><a href="#">Third Item</a></li>
  <li><a href="#">Fourth Item</a></li>
</ul>

<p>Inspect the first two items to see that the "computed" widths are different.</p>

body {
  margin: 30px auto;
  font: 90%/1.65 sans-serif;
  text-align: center;
}

h3 {
  font-size: 1.65em;
  margin: 30px 0;
}

ul { 
  padding: 0;
}

li {
  list-style-type: none;
  display: inline-block;
}

a {
  text-decoration: none;
  color: #333;
  font-size: 1.4em;
  background: #A5C77F;
  display: block;
  padding: 10px 15px;
  margin: 10px 0;
  border-right: 1px solid whitesmoke;
  transition: font-weight .3s;
}

a:hover, a.active {
  font-weight: bold;  
}