jquery - How to make a navigation menu dynamic? -

how make following navigation dynamic, doesn't break if add navigation element.

nav {    position: relative;    height: 57px;    line-height: 57px;    width: 100%;    background-color: #fff;    font-weight: 500;    text-transform: uppercase;    font-size: 14px;    overflow: hidden;  }  nav ul {    position: relative;    display: -ms-flexbox;    display: -webkit-flex;    display: -moz-flex;    display: -ms-flex;    display: flex;    margin: 0 auto;    padding: 0;    list-style: none;    -ms-box-orient: horizontal;    -ms-box-pack: center;    -webkit-flex-flow: row wrap;    -moz-flex-flow: row wrap;    -ms-flex-flow: row wrap;    flex-flow: row wrap;    -webkit-justify-content: center;    -moz-justify-content: center;    -ms-justify-content: center;    justify-content: center;    text-align: center;    width: 100%;    height: 100%;  }  nav ul li {    position: relative;    margin: 0;    text-align: center;    -webkit-flex: 1;    -moz-flex: 1;    -ms-flex: 1;    flex: 1;    height: 100%;  }  nav li:last-child::before {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    height: 8%;    content: '';    background-color: #9c27b0;    transition: transform 0.3s;  }  nav li:first-child:active ~ li:last-child::before {    transform: translate3d(-200%, 0, 0);  }  nav li:nth-child(2):active ~ li:last-child::before {    transform: translate3d(-100%, 0, 0);  }  nav li:nth-child(3):active ~ li:last-child::before {    transform: translate3d(0, 0, 0);  }

<nav>    <ul>      <li><a href="#tab1"><span class="title">tab 1</span></a>      </li>      <li><a href="#tab2"><span class="title">tab 2</span></a>      </li>      <li><a href="#tab3"><span class="title">tab 3</span></a>      </li>    </ul>  </nav>

at end of css, have:

nav li:first-child.navigation-current ~ li:last-child::before {   transform: translate3d(-200%, 0, 0); }  nav li:nth-child(2).navigation-current ~ li:last-child::before {   transform: translate3d(-100%, 0, 0); }  nav li:nth-child(3).navigation-current ~ li:last-child::before {   transform: translate3d(0, 0, 0); } 

so, if added fourth tab, have this?

nav li:first-child.navigation-current ~ li:last-child::before {   transform: translate3d(-300%, 0, 0); }  nav li:nth-child(2).navigation-current ~ li:last-child::before {   transform: translate3d(-200%, 0, 0); }  nav li:nth-child(3).navigation-current ~ li:last-child::before {   transform: translate3d(-100%, 0, 0); }  nav li:nth-child(4).navigation-current ~ li:last-child::before {   transform: translate3d(0, 0, 0); } 

is there way css doesn't have change add or remove tab?

(also available a jsfiddle)