JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="nav-bar-login-or-reg">
        <a href=""><span class="underline-dotted">Войти или зарегистрироваться</span></a>
    </li>	
</ul>

CSS

@import url(http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css);

body {
    background-color: blue;
}
ul {
    list-style-type: none;
}
span.underline-dotted {
    color: white;
    border-bottom: 1px dotted white;
}
.nav-bar-login-or-reg a:before {
    content: "\f084";
	font-family: 'FontAwesome';
	padding-right: 4px;
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	text-decoration: inherit;
	border-bottom: none;
    color:#fff;
}
a {
    text-decoration: none;
}