CSS 如何为 a:before 和 a:after 编写 :hover 条件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5777210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to write :hover condition for a:before and a:after?
提问by Jitendra Vyas
How to write :hoverand :visitedcondition for a:before?
怎么写:hover和:visited条件a:before？
I'm trying a:before:hoverbut it's not working
我正在尝试，a:before:hover但没有用
回答by BoltClock
This depends on what you're actually trying to do.
这取决于您实际尝试做什么。
If you simply wish to apply styles to a :beforepseudo-element when the aelement matches a pseudo-class, you need to write a:hover:beforeor a:visited:beforeinstead. Notice the pseudo-element comes afterthe pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.
如果您只是希望:before在a元素匹配伪类时将样式应用于伪元素，则需要编写a:hover:before或a:visited:before代替。注意伪元素在伪类之后（实际上，在整个选择器的最后）。还要注意它们是两种不同的东西；一旦遇到诸如此类的语法问题，将它们称为“伪选择器”会让您感到困惑。
If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::beforeand a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.
如果您正在编写 CSS3，您可以用双冒号表示伪元素，以使这种区别更加清晰。因此，a:hover::before和a:visited::before。但是，如果您正在为诸如 IE8 及更早版本的旧浏览器进行开发，那么您可以使用单冒号就可以了。
This specific order of pseudo-classes and pseudo-elements is stated in the spec:
伪类和伪元素的特定顺序在规范中说明：
One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectorsis a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selectoris either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
一个伪元素可以附加到选择器中的最后一个简单选择器序列。
甲简单选择的序列是不是由一个组合子分隔的简单选择器的链。它总是以类型选择器或通用选择器开头。序列中不允许使用其他类型选择器或通用选择器。
甲简单选择器可以是一个类型选择器，通用选择，属性选择器，类选择，ID选择，或伪类。
A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.
伪类是一个简单的选择器。然而，伪元素不是，即使它类似于一个简单的选择器。
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply onlywhen the user interacts with the pseudo-element itself but not the aelement, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hoverto an actual child element instead of a pseudo-element.
但是，对于诸如:hover1 之类的用户操作伪类，如果您只需要在用户与伪元素本身而不是元素交互时才应用此效果a，那么除了通过一些模糊的依赖于布局的解决方法之外，这是不可能的. 正如文本所暗示的，标准 CSS 伪元素目前不能有伪类。在这种情况下，您将需要应用:hover到实际的子元素而不是伪元素。
1Of course, this does not apply to link pseudo-classes such as :visitedas in the question, since pseudo-elements aren't links.
1当然，这不适用于问题中的链接伪类:visited，因为伪元素不是链接。
回答by sandeep
回答by Rao
To change menu link's text on mouseover. (Different language text on hover) here is the
在鼠标悬停时更改菜单链接的文本。（悬停时的不同语言文本）这里是
html:
html：
<a align="center" href="#"><span>kannada</span></a>
css:
css：
span {
font-size:12px;
}
a {
color:green;
}
a:hover span {
display:none;
}
a:hover:before {
color:red;
font-size:24px;
content:"?????";
}
回答by subindas pm
Try to use .card-listing:hover::afterhoverand afterusing ::it wil work
尝试使用.card-listing:hover::afterhover并after使用::它会起作用
回答by bbrinx
BoltClock's answer is correct. The only thing I want to append is that if you want to only select the pseudo element, put in a span.
BoltClock 的回答是正确的。我唯一想补充的是，如果您只想选择伪元素，请放入一个跨度。
For example:
例如：
<li><span data-icon='u'></span> List Element </li>
instead of:
代替：
<li> data-icon='u' List Element</li>
This way you can simply say
这样你可以简单地说
ul [data-icon]:hover::before {color: #f7f7f7;}
which will only highlight the pseudo element, not the entire li element
这只会突出显示伪元素，而不是整个 li 元素
回答by Stefan Gruenwald
You can also restrict your action to just one class using the right pointed bracket (">"), as I have done in this code:
您还可以使用右尖括号 (">") 将您的操作限制为一个类，就像我在此代码中所做的那样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
font-size:12px;
}
a {
color:green;
}
.test1>a:hover span {
display:none;
}
.test1>a:hover:before {
color:red;
content:"Apple";
}
</style>
</head>
<body>
<div class="test1">
<a href="#"><span>Google</span></a>
</div>
<div class="test2">
<a href="#"><span>Apple</span></a>
</div>
</body>
</html>
Note:The hover:before switch works only on the .test1 class
注意：hover:before 开关仅适用于 .test1 类
