Állapotjelző

html
<div class="statusList scroll">
    <ul class="text-uppercase list-unstyled" role="navigation "aria-label='Állapotjelző''>
        <li><a title="alapadatok" href="#">állapot</a></li>
        <li class="divider"><i class="fas fa-caret-right" aria-hidden="true"></i></li>
        <li><a title="alapadatok" href="#">állapot</a></li>
        <li class="divider"><i class="fas fa-caret-right" aria-hidden="true"></i></li>
        <li><a title="alapadatok" href="#">állapot</a></li>
        <li class="divider"><i class="fas fa-caret-right" aria-hidden="true"></i></li>
        <li>állapot</li>
        <li class="divider"><i class="fas fa-caret-right" aria-hidden="true"></i></li>
        <li>állapot</li>
        <li class="divider"><i class="fas fa-caret-right" aria-hidden="true"></i></li>
        <li>állapot</li>
        <li class="divider"><i class="fas fa-caret-right" aria-hidden="true"></i></li>
        <li>állapot</li>
    </ul>
</div>
css
.statusList {
	width: 100%;
	text-align: left;
}
.statusList ul li {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.8rem;
}
.statusList ul li.active a {
	color: #004b88;
}