删除文本 - 任务下划线，以:在CSS之后

Question

可能的重复：
"文本 - 任务"one_answers"：efter"伪元素
"文本 - 任务"one_answers"：efter"伪元素，重新审视

我使用<a>标签进行导航链接以下是HTML

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

并应用:after CSS属性以放置Divider的管道

.panel:after{
    content:"|";
    margin-left: 4px;
    margin-right: 4px;
}
.panel:last-child:after{
    content:"";
}

我想在选择菜单时要放下下划线，因为我正在应用一个名为Selected

的类

.panel.selected {
    text-decoratoion:underline;
}

，但问题是菜单之后的管道" |"也有下划线，我想删除它。我什至尝试更改.panle:after的CSS，如下所示，

.panel:after{
    content:"|";
    margin-left: 4px;
    margin-right: 4px;
    text-decoration:none;
}

但下划线仍然存在。

任何建议，谢谢。

Answer 1

尝试此一个：

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

Answer 2

您也可以使用彼此的方法来进行问题：-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>

Answer 3

我不完全知道您的.panel.selected {}部分。但是，当使用此链接时，您可以通过使用此链接进行链接下划线。

.panel:focus {text-decoration:underline;}

您可以从 links 和 pipes（|）中删除下划线。

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

在您的页面中添加上面的两个并检查。

Answer 4

一个简单的菜单适合您的要求。

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