<input id="breaking" type="checkbox" value="breaking" /><label for="breaking">Add breaking character</label>

<br />

<input id="padding" type="checkbox" value="padding" /><label for="padding">Add padding</label>

<br/>

<input id="display" type="checkbox" value="inline-block" /><label for="display">Set pesudo-element as <code>inline-block</code></label>

<br />

<input id="whitespace" type="checkbox" value="pre" /><label for="whitespace">Add <code>white-space: pre</code> to before pseudo-element</label>

<br /><br />

<div class="tags"><ul id="list"><li>PHP</li><li>JavaScript</li><li>Rust</li><li>ObjectiveC</li><li>Ruby</li><li>Python</li><li>Go</li><li>C</li><li>Swift</li><li>Java</li><li>Perl</li><li>Pascal</li><li>Bash</li><li>Kotlin</li><li>Erlang</li><li>Scala</li><li>Elixir</li><li>Haskell</li></ul></div>

<br /><br />
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: inline;
}

.tags {
  width: 200px;
  /* This is so we can visually see the box boundaries */
  border: 2px solid darkorchid;
}

button {
  margin: 2rem 0;
}

ul.breaking {
  li::after {
    display: inline;
    content: " " !important;
    background: magenta;
  }
}

ul.inline-block {
  li::after {
    display: inline-block !important;
    content: " ";
  }
}

ul.whitespace {
  li::before {
    content: " ";
    white-space: pre;
  }
}

ul.padding {
  li::after {
    display: inline;
    content: "";
    padding-right: 5px;
  }
}

body {
  font: 125%/1.4 system-ui;
  margin: 2rem;
}
View Compiled
var checkboxBreaking = document.getElementById('breaking');
var checkboxPadding = document.getElementById('padding');
var checkboxDisplay = document.getElementById('display');
var checkboxWhitespace = document.getElementById('whitespace');
var list = document.getElementById('list');

function checkboxCallback(className) {
  return function (evt) {
    if (evt.target.checked) {
      list.classList.add(className);
    } else {
      list.classList.remove(className);
    }
  }
}

checkboxBreaking.addEventListener('change', checkboxCallback('breaking'));

checkboxPadding.addEventListener('change', checkboxCallback('padding'));

checkboxDisplay.addEventListener('change', checkboxCallback('inline-block'));

checkboxWhitespace.addEventListener('change', checkboxCallback('whitespace'));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.