JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<ul>
    <li>One</li>
    <li class="active">Two</li>
    <li>Three</li>
    <li>Four</li>
    <li class="marker">m</li>
</ul>
<span>m</span>

CSS

body {
    padding: 50px;
    font-family: Helvetica;
    font-size: 12px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

li {
    float: left;
    margin-right: 20px;
}
.marker {
    display: block;
    float: none;
    clear: both;
    color: red;
    -webkit-transition: all 0.25s ease-in-out;
}

li:hover,
li.active {
    color: red;
}

ul:before {
    /*content: 'm';*/
    position: absolute;
    color: red;
    bottom: 0;
}
span {
    color: red;
    display: none;
}

li:hover ~ span {
    display: none;
}
li:first-child:hover ~ .marker,
li:first-child.active ~ .marker {
    margin-left: 0;
}
li:nth-child(2):hover ~ .marker,
li:nth-child(2).active ~ .marker {
    margin-left: 8.3%;
}
li:nth-child(3):hover ~ .marker,
li:nth-child(3).active ~ .marker {
    margin-left: 16%;
}
li:nth-child(4):hover ~ .marker,
li:nth-child(4).active ~ .marker {
    margin-left: 24%;
}

JavaScript

$('li').click(function() {
    var i = $('li').index(this);
    $('li').removeClass('active').eq(i).addClass('active');
});