在 CSS 中的每个元素后添加一个符号答案

【问题标题】：Adding a symbol after each element in CSS在 CSS 中的每个元素后添加一个符号
【发布时间】：2016-08-08 16:03:22
【问题描述】：

我需要制作一个导航栏，每个链接之间都有符号“|”。我尝试使用

.navbar li::after { position:absolute; content:" | "; }

但我总是得到链接下的第一个符号，我不知道为什么。

http://prntscr.com/c34zrf

我也尝试过使用右边框和左边框，但这看起来很丑陋，每个元素都有 2 行。

http://prntscr.com/c350gw

【问题讨论】：

在我的电脑上看起来不错。我会禁用绝对位置。您能否提供我们可以帮助您解决问题的链接？
不是真的，它可能在你的电脑上看起来不错，因为我在导航栏的左侧有徽标，但我不知道这是否重要
我假设你得到 2 行是因为你使用了右边界和左边界？也许只使用两者之一？
是的，但它会看起来很丑，我最终会在最后一个上只有“左或右”。
好吧，只更改最后一个元素的规则。

标签： html css navigation border navbar

【解决方案1】：

这是我通常在您的边界右解决方案上执行此构建的方式：fiddle

HTML：

我包含一个跨度来应用边框，因为这意味着边框将保持文本的高度。如果要向列表添加内边距，请将水平内边距应用于 li，将垂直内边距应用于跨度。

<ul>
  <li><span>Link 1</span></li>
  <li><span>Link 2</span></li>
  <li><span>Link 3</span></li>
</ul>

您可以使用 :first-child 删除边框，该边框应该一直可以回到IE8

CSS：

ul{

  padding:0px;
  margin:0px;

}

li {

  list-style:none;
  display:inline-block;
  padding:10px 0px;

}

span {

  padding:0px 10px;
  border-left:1px solid red;
  display:inline-block;

}

li:first-child span {

  border-left:none;  

}

【讨论】：

【解决方案2】：

我完全同意 Christopher Thomas 的方法，它实际上非常聪明。我想到了另一种可能的方法。

将链接放在三个单独的段落中并制作两个 div，这将是行。然后您仍然可以将它们单独格式化，使其看起来像线条。

线条不是完全垂直居中，但这是我在五分钟内能做的最好的。

div {
    background: #fe89d7;
    width: 1px;
    height: 15px;
    display: inline-block;
}

p {
    display: inline-block;
    padding: 15px;
}

        <body>
            <p>Link 1</p>
            <div></div>
            <p>Link 2</p>
            <div></div>
            <p>Link 3</p>
        </body>

【讨论】：