Ignore element in width

I'm making a menu that hides information in the buttons. Take a look at the demo code:

ul{
  list-style: none;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  padding: 10px;
}
li{
  display: inline-block;
  float: right;
  clear: both;
  border-radius: 20px;
  border: 1px solid black;
  padding: 10px;
  min-width: 0%;
  margin-bottom: 10px;

  transition: all 0.3s ease;
}
li > span{
  color: gray;
  margin-left: 5px;
  opacity: 0;

  transition: opacity 0.3s ease;
}
li:hover{
  min-width: 100%;
}
li:hover > span{
  opacity: 1;
}

*{
  box-sizing: border-box;
}

<ul>
  <li>FOO<span>BAR</span></li>
  <li>BUTTON<span>More info</span></li>
</ul>

https://jsfiddle.net/DerekL/g8wn74xe/

The li tags should ignore the text in the span as if they are not there (when calculating the width). Is it possible to achieve this effect?