JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<body>

	<ul>
		<li><a href="#_">ZorNet.Ru 1</a></li>
		<li><a href="#_">ZorNet.Ru 2</a></li>
		<li><a href="#_">ZorNet.Ru 3</a></li>
		<li><a href="#_">ZorNet.Ru 4</a></li>
	</ul>

</body>

CSS

html, body{ margin:0px; padding:0px; }

body{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height:100vh;
	background:#1b1d1d;
	font-family: 'Roboto', sans-serif;
}

ul, li{
	list-style: none;
	padding:0px;
	margin:0px;
}

li{
	display:inline-block;
}

li a {
	padding:10px;
	display:block;
	text-decoration: none;
	text-transform: uppercase;
	color:#ddd;
	position:relative;
}

li a:after{
	content:'';
	width:0%;
	transition:all 0.3s ease;
	left:50%;
}

li a:before{
	content:'';
	width:0%;
	transition:all 0.3s ease;
	left:50%;
}

li a:hover:after{
	content:'';
	position:absolute;
	bottom:0px;
	left:50%;
	background:#FFDA00;
	height:3px;
	width:50%;
}

li a:hover:before{
	content:'';
	position:absolute;
	bottom:0px;
	left:0px;
	background:#FFDA00;
	height:3px;
	width:50%;
}