<h3>Fixing <code>font-weight</code> hover states using defined widths</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>

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;
  width: 24%;
}

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 {
  font-weight: bold;   
}