 <p>Try this.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code> li.breadcr { width: 2em; height: 2em; text-align: center; line-height: 2em; border-radius: 1em; background: #0095c4; margin: 0 3em; display: inline-block; color: white; position: relative; } li.breadcr::before{ content: '' !important; position: absolute !important; top: .9em !important; left: -8em !important; width: 10em !important; height: .2em !important; background: #0095c4 !important; z-index: -1 } li.breadcr:first-child::before { display: none !important; } .active { background: #0095c4; } .active ~ li.breadcr { background: #badae4 !important; } .active ~ li.breadcr::before { background: #badae4 !important; } ul.sub{ list-style: none; } li.sub02{ display: inline-block; font-family: TeX Gyre Heros,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/&gt; &lt;ul&gt; &lt;li class="breadcr" &gt;1&lt;/li&gt; &lt;li class="active breadcr"&gt;2&lt;/li&gt; &lt;li class="breadcr"&gt;3&lt;/li&gt; &lt;/ul&gt; &lt;ul class="sub"&gt; &lt;li class="sub02" style="margin-left: 25px;"&gt;&lt;b&gt;File or link&lt;/b&gt;&lt;/li&gt; &lt;li class="sub02" style="margin-left: 53px;"&gt;&lt;b&gt;Category&lt;/b&gt;&lt;/li&gt; &lt;li class="sub02" style="margin-left: 50px;"&gt;&lt;b&gt;Comments&lt;/b&gt;&lt;li&gt; &lt;/ul&gt;</code></pre> </div> </div> </p>