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..



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


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{
    padding: 0 1em 0 0;

input {
    display: none;
label {
    position: absolute;
    top: 100%;
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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.