在导航栏中的链接之间放置一个点

Question

如何在导航中的链接之间放置一个点？如果重要，我正在使用Bootstrap

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

使用以下代码，点将以新行显示：

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

我不想让一个点表现为链接，所以我对此不满意：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

定位点absolute以强制它在列表项后面。

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

由于您的元素上的padding-top和padding-bottom，您的问题就会发生。这会放大初始<li>并将:after内容与其底部对齐。