JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top-nav_container">
<nav class="top-nav">
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">RSS</a>
<a href="#">Херня какая-то</a>
<a href="#">Русик, займись делом</a>
</nav>
</div>
CSS
body {
background: #0f0f17;
padding: 50px;
}
.top-nav_container {
color: #d9dad6;
font: 12px Arial;
position: relative;
float: left;
}
.top-nav_container:after {
content: '*/';
position: absolute;
bottom: 0;
right: 0;
}
.top-nav {
font-size: 0;
padding: 16px 20px 14px 14px;
}
.top-nav:after,
.top-nav:before {
font-size: 12px;
position: absolute;
height: 15px;
overflow: hidden;
padding: 0 11px 0 0;
}
.top-nav:before {
content: '/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
top: 0;
left: 0;
}
.top-nav:after {
content: '- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -';
bottom: 0;
left: 11px;
}
.top-nav a {
font-size: 14px;
color: #a0da4e;
text-decoration: none;
padding: 0 0 0 20px;
position: relative;
}
.top-nav a:before {
content: '*';
color: #d9dad6;
position: absolute;
left: 8px;
top: 3px;
}
.top-nav a:first-child {
padding: 0;
}
.top-nav a:first-child:before {
display: none;
}
.top-nav a:hover {
text-decoration: underline;
}