<main ontouchstart>
	<nav class="tab-link">
		<a>home</a>
		<a>shop</a>
		<a>blog</a>
		<a>about</a>
		<a>contact</a>
		<hr/>
	</nav>
</main>
$p: 12px;
$n: 5;

// container
.tab-link {
	display: flex;
	position: relative;
	background: white;
	border-radius: 2px;
	// border
	hr {
		position: absolute;
		bottom: 0;
		left: 0;
		margin: 0;
		border: 0;
		border-radius: 2px;
		height: $p/3;
		width: calc(100% / #{$n});
		background: lighten($slate, 50%);
	}
	// links
	a {
		display: block;
		width: calc(100% / #{$n});
		padding: $p*2;
		text-align: center;
		text-transform: capitalize;
		// loop for transforms, needs to be a different percentage for each link
		@for $i from 1 through $n {
			&:nth-child(#{$i}) {
				&.active {
					~ hr {
						transform: translateX(#{($i - 1) * 100%});
					}
				}
				&:hover, &:focus, &:active {
					~ hr, ~ .active ~ hr {
						transform: translateX(#{($i - 1) * 100%});
					}
				}
			}
		}
	}
}

// additional styling
body {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
}

main {
	width: 100%;
	max-width: 800px;
	padding: $p/2;
	background: lighten($slate, 75%);
	@media only screen and (min-width: 800px) {
		border-radius: 2px;
	}
}

External CSS

  1. https://codepen.io/tutsplus/pen/598c614630b8b6882828b40d33bdbf3a
  2. https://fonts.googleapis.com/css?family=Libre+Franklin:100,200,300,400,500,600

External JavaScript

This Pen doesn't use any external JavaScript resources.