3

我正在尝试删除链接的伪选择器中的:hover行为:after。但我认为这是不可能的。

a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 12px;
  color: #666;
  text-decoration: none
}

a:after {
  content: "·";
  margin: 0 2px 0 6px
}

a:hover {
  text-decoration: underline
}

a:hover:after {
  text-decoration: none
}
<a href="#">test</a>
<a href="#">test</a>
<a href="#">test</a>

签出JsFiddle。

可能吗？

4

2 回答 2

6

处理这个问题的最简单方法是span在每个链接的文本周围加上 a：

<a href="#"><span>test</span></a>

:hover仅span给出text-decoration: underline：_

a:hover span {text-decoration: underline}

见：http: //jsfiddle.net/thirtydot/3N9vs/27/

一个类似的老问题：Cannot undo text-decoration for child-elements
同样相关：CSS text-decoration property cannot be overridden by child element

于 2012-04-12T11:28:57.517 回答
4

您需要赋予:after伪元素position:absolute;并赋予它margin来转移它。锚点还需要内容display:inline-block;才能:after正确显示。

见：http: //jsfiddle.net/ECFBR/

于 2012-04-12T11:13:38.463 回答