可能重复:
“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>
并应用:after
css 属性为分隔线放置管道
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
}
.panel:last-child:after{
content:"";
}
我想在选择菜单时添加下划线,因为我正在应用一个名为 selected 的类
.panel.selected {
text-decoratoion:underline;
}
但问题是菜单“|”之后的管道 也有下划线,我想删除它。我什至尝试将css更改.panle:after
如下,
.panel:after{
content:"|";
margin-left: 4px;
margin-right: 4px;
text-decoration:none;
}
但下划线仍然存在。
任何建议,谢谢。