JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="innerNav">
    <ul>
        <li>One</li><li>Two</li><li>Three</li><li>Four</li>
    </ul>
</nav>
<input type="number" placeholder="font-size in px">
<button type="button">change font-size</button>

CSS

.innerNav li {
    display: inline-block;
    border-bottom: 3px solid red;
    margin-right: 1em;
    position: relative;
}
.innerNav li + li:before {
    border-left: 1px solid blue;
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    left: -0.5em;
    top: 0;
}

JavaScript

$('button').on('click', function(){
    var fontSize = $('input').prop('value');
    if (fontSize > 0) {
        $('.innerNav').find('li').css('font-size', fontSize + 'px');
    }
});