Derek 朕會功夫 Derek 朕會功夫 - 5 months ago 12
CSS Question

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?

Answer

You can use position: absolute (and a few other tweaks) to prevent the <span> from affecting layout:

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;
    overflow: hidden;
    position: relative;
    
    transition: all 0.3s ease;
}
li > span{
    color: gray;
    margin-left: 5px;
    opacity: 0;
    position: absolute;
    white-space: nowrap;
    
    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>

Comments