JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Om mig<span/></a></li>
        <li><a href="#">Projekter</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>

CSS

nav{
	height: 150px;
	width: 300px;
	float: left;
	background-color: #FFF;
}

ul{
	list-style-type:none;
}

li{
	border-top: #8EA4BA 1px solid;
	position: relative;
}

li:last-child{
	border-bottom: #8EA4BA 1px solid;
}

nav ul li a{
	color: #47525D;
	text-decoration: none;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
	font-family: "Helvetica Neue", "Helvetica Neue Bold", "Helvetica Neue Bold Italic", "Helvetica Neue Condensed Black", "Helvetica Neue Condensed Bold", "Helvetica Neue Italic", "Helvetica Neue Light", "Helvetica Neue Light Italic", "Helvetica Neue Medium", "Helvetica Neue Medium Italic", "Helvetica Neue Thin", "Helvetica Neue Thin Italic", "Helvetica Neue UltraLight", "Helvetica Neue UltraLight Italic";
	display: block;
	padding: 10px 0px 10px 0px;
}

nav ul li a:hover{
	color: #C3E1FF;
	font-weight: 700;
}

nav ul li span:hover{
	-webkit-transform:translate(0px, 0px);
  	-webkit-transition:all 0.5s ease-out;
  	transition:all 0.5s ease-out;
}

nav ul li span{
	height:43px;
  	width:300px;
	position: absolute;
	background-color:#47525D;
	-webkit-transform:translate(300px, 0px);
  	-webkit-transition:all 0.5s ease-out;
  	transition:all 0.5s ease-out;
 	background-position:initial initial;
  	background-repeat:initial initial;
}