Marko Marko - 1 month ago 9
CSS Question

Place a dot between links in navbar

How can I place a dot between links in navigation? I am using Bootstrap if it matters

http://codepen.io/anon/pen/VKoWea

Using following code a dot will go in new line:

li:after {
content: '\00B7';
padding-left: 15px;
}


I don't want a dot to behave as a link so I am not satisfied with this:



li a:after {
content: '\00B7';
padding-left: 15px;
}

<ul class="nav navbar-nav">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>




Answer

Position the dot absolute to force it behind the list item.

li:after {
    content: '\00B7';
    padding-left: 15px;
    position: absolute;
    top: 14px;
    right: 8px;
}

Your problem happens due to the padding-top and padding-bottom on your a element. this enlarges the initial <li> and aligns the :after content to the bottom of it.

Comments