删除文本修饰下划线,用于:在css之后

Question

可能重复:
"text-decoration"和":after"伪元素
"text-decoration"和":after"伪元素,重新访问

我正在使用<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>

并应用:aftercss属性为分隔符放置管道

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

我想在选择菜单时使用下划线,因为我正在应用一个名为selected的类

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

但问题是菜单后面的pipline"|" 也有下划线,我想删除它.我甚至试图改变css .panle:after如下,

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

但仍有下划线.

有任何建议,谢谢.

Answer 1

试试这个

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

现场演示

---------------

---------------

或习惯了这个

CSS

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

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>

现场演示

Answer 2

您也可以使用另一种方法解决您的问题：-演示

我尝试过最小化代码：-

HTML

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

CSS

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