删除:悬停在:after元素上 [英] Remove :hover on :after elements

问题描述

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

I'm trying to remove the :hover behaviour in an :after pseudoselector for a link. But I think that it's not possible.

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 .

有可能吗?

推荐答案

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

The easiest way to handle this is to wrap a span around the text in each link:

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

在:hover 上，只有 span 被赋予 text-decoration:下划线:

a:hover span {text-decoration: underline}

请参见: http://jsfiddle.net/thirtydot/3N9vs/27/

一个类似的较早的问题:无法撤消子元素的文本装饰
同样相关: CSS文本装饰属性不能被子元素覆盖

A similar older question: Cannot undo text-decoration for child-elements
Also relevant: CSS text-decoration property cannot be overridden by child element

这篇关于删除:悬停在:after元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！