css - 删除 :hover on :after elements

Question

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

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 .

这可能吗？

Answer 1

处理这个问题的最简单方法是在每个链接的文本周围包裹一个 span:

<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