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

Question

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

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

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

http://prntscr.com/c34zrf

我也尝试过使用 border-right 和 border-left，但是这看起来很丑，而且每个元素都有 2 行。

http://prntscr.com/c350gw

Answer 1

以下是我通常如何在您的右边界解决方案上进行构建：fiddle

HTML:

我添加了一个应用边框的跨度，因为这意味着边框将保持文本的高度。如果要向列表添加填充，请对 li 应用水平填充，对 span 应用垂直填充。

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

}

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

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

Adding a symbol after each element in CSS

html

css

navigation

border

navbar