试试这个：

.panel:after {
    display:inline-block;
}

或者使用以下方式：

.panel {
  display: inline-block;
  vertical-align: top;
  position: relative;
  color: black;
  font-size: 14px;
  font-weight: bold;
  margin: 0 5px;
}

.panel:after {
  content: '';
  border-left: solid 2px red;
  left: -10px;
  top: 2px;
  height: 10px;
  position: absolute;
}

.panel:first-child:after {
  display: none;
}

.panel:hover {
  text-decoration: none;
}

<div class="nav_container">
  <a class="panel" href="demolink">menu1</a>
  <a class="panel" href="demolink">menu2</a>
  <a class="panel" href="demolink">menu3</a>
</div>

你也可以使用另一种方法来回答你的问题：-demo
我试着用最小化的代码：

.nav_container a {
  color: red;
  display: inline-block;
}

.nav_container a+a {
  color: red;
  border-left: 1px solid red;
  padding-left: 7px;
  line-height: 12px;
}

<div class="nav_container">
  <a href="demolink">menu1</a>
  <a href="demolink">menu2</a>
  <a href="demolink">menu3</a>
</div>

我不知道你的.panel.selected {}部分是做什么的。但是，你可以使用这个在链接被聚焦的时候给它加下划线。
.panel:focus {text-decoration:underline;}
并且可以删除链接和**管道的下划线（|）**像这样。
.panel:link {text-decoration:none;}
将以上两个添加到您的页面并检查。

一个简单的菜单为您的要求。
HTML：

<div class="menu">
<ul>
<li class="last-menu"><a href="#">menu1</a></li>
<li class="last-menu"><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>

CSS：

.menu{
    width:100%;
}

.menu ul{
    list-style:none;
}

.menu li{
    float:left;

}

.last-menu{
    border-right:1px solid #000;
}