Question

可能重复：
  “text-decoration” and the “:after” pseudo-element
  “text-decoration” and the “:after” pseudo-element, revisited

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

但问题是菜单后面的pipline“|”也有下划线，我想删除它。我甚至尝试更改.panle:after的css，如下所示，

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

但仍有下划线。

任何建议，谢谢。

Answer 1

试试这个

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

的 Live demo 的

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

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

或习惯于此

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

的 Live demo 的

Answer 2

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

我尝试过最小化的代码： -

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

Answer 3

我并不完全知道你的.panel.selected {}部分是做什么的。但是，通过使用此链接集中，您可以使链接加下划线。

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

您可以删除链接和竖管（|）下划线。

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

删除文本修饰下划线，用于：在css之后

4 个答案:

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

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