trjhtr

I have put together a CSS snippet to responsively display a Show more / Show less button if content of list cannot fit 1 line (1em) when you resize the window using pseudo-elements.

Currently, I have added an ul:after element with a solid white bg to hide the Show more/less button when content does not overflow 1 line. Could not think of anything else but my solution seems a walkaround only like when there is a hole in the wall and you just hide it with a picture. Is there a better way to achieve this via CSS only? I am not sure if this solution can be buggy in some cases? Also, if I want to add a background image to the whole website, this item with its solid background would mess things up for example..

http://jsfiddle.net/6sj4e/524/

html:

<nav>
<input id="toggle" type="checkbox">
<label for="toggle"></label>
<ul>
 <li>Item #1</li>
 <li>Item #2</li>
 <li>Item #3</li>
 <li>Item #4</li>
 <li>Item #5</li>
 <li>Item #6</li>
</ul>
</nav>

css:

nav 
 position: relative;
 border: 1px solid #000;
 overflow: hidden;

nav ul 
 overflow: hidden;
 line-height: 1em;
 list-style-type: none;
 margin: 0;
 padding: 0;
 max-height: 1em;
 margin-bottom: 1em;

nav ul li
 display:inline-block;
 padding: 0 1em 0 0;



input 
 display: none;

label 
 position: absolute;
 top: 100%;
 margin-top:-1em;

label:before 
 content: "Show More";
 cursor: pointer;

nav ul:after 
 content: '';
 position: absolute;
 display: block;
 height: 1em;
 width: 100%;
 background: white;



input:checked ~ ul 
 max-height: 100%;

input:checked + label:before 
 content: "Show Less";

input:checked ~ ul:after 
 display: none;