Ignore element in width

Question

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?

Answer 1

Set the span font-size to 0 and re-set it on hover

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;
    font-size:0;
    
    transition: all 0.3s ease;
}
li:hover{
    min-width: 100%;
}
li:hover > span{
    opacity: 1;
    font-size:inherit;
}

*{
    box-sizing: border-box;
}

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