删除文本装饰下划线，用于 css 中的 a:after [重复]答案

【问题标题】：Remove text-decoration underline, for a:after in css [duplicate]删除文本装饰下划线，用于 css 中的 a:after [重复]
【发布时间】：2012-10-21 17:52:04
【问题描述】：

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

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

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

但下划线仍然存在。

任何建议，谢谢。

【问题讨论】：

见stackoverflow.com/questions/1238881/…
这个不行，也是重复的。
另一种方法是用 none 替换 text-decoration 并在带有边框底部的文本上应用下划线：1px solid #ccc，对于 :after 使用边框底部：1px纯白色；这样 :after 元素不会应用下划线，但文本上会出现下划线。简单，应该可以正常工作。如果您想在 :after 元素之间留出空白，请在 :after 上使用填充。

标签： html css navigation text-decorations

【解决方案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>

【讨论】：

至少先阅读问题

【解决方案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;
}

【讨论】：

【解决方案3】：

我不完全知道您的 .panel.selected {} 部分是做什么的。但是，您可以使用 this 为链接聚焦添加下划线。

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

您可以像这样从 links 和 pipes(|) 中删除下划线。

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

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

【讨论】：

【解决方案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;
}

【讨论】：