<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'));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.