8

可能重复：
“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;
}

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

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

但下划线仍然存在。

任何建议，谢谢。

4

4 回答 4

23

试试这个：

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

于 2012-11-01T06:29:54.047 回答
5

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

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

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;
}
于 2012-11-01T09:15:32.613 回答
1

我不完全知道你的.panel.selected {}角色是做什么的。但是，您可以通过使用它来使链接成为焦点时带下划线。

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

您可以像这样从链接和管道（|）中删除下划线。

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

将以上两个添加到您的页面并检查。

于 2012-11-01T07:02:08.343 回答
-1

满足您要求的简单菜单。

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;
}
于 2012-11-02T14:08:05.840 回答