如何写：hover条件为：之前和之后？
如何写:hover和:visited条件为a:before ？
我试图a:before:hover但它不工作
这取决于你实际上想要做什么。
如果仅仅希望在a元素匹配伪类时将样式应用于伪元素:before ，则需要编写a:hover:before或a:visited:before 。 注意伪元素在伪类之后（实际上，在整个select器的最后）。 还要注意他们是两回事。 一旦遇到这样的语法问题，将它们称为“伪select器”将会让你感到困惑。
如果你正在编写CSS3，你可以使用双冒号来表示一个伪元素，以使这个区别更清晰。 因此， a:hover::before和a:visited::before 。 但是，如果您正在开发IE8等老式浏览器，那么您可以放弃使用单个冒号。
伪类和伪元素的具体顺序在规范中说明 ：
一个伪元素可以被附加到select器中的最后一个简单select器序列。
一系列简单的select器是一个简单的select器链，不被一个组合器分开。 它始终以typesselect器或通用select器开始。 序列中不允许使用其他types的select器或通用select器。
一个简单的select器是一个typesselect器，通用select器，属性select器，类select器，IDselect器或伪类。
伪类是一个简单的select器。 但是，伪元素不是，即使它类似于简单的select器。
但是，对于用户操作的伪类，例如:hover 1 ，如果只有在用户与伪元素本身交互但不与a元素交互时才需要此效果，则除了通过一些隐藏的布局独立的解决方法。 正如文中所暗示的那样，标准的CSS伪元素当前不能具有伪类。 在这种情况下，您需要应用:hover在实际的子元素上，而不是伪元素。
1 当然，这不适用于链接伪类，如:visited在问题中:visited ，因为伪元素不是链接。
写a:hover::before而不是a::before:hover ： 例子 。
要更改鼠标hover上的菜单链接的文本。 （不同的语言文字hover）这里是
jsfiddle的例子
HTML：
<a align="center" href="#"><span>kannada</span></a>
CSS：
span { font-size:12px; } a { color:green; } a:hover span { display:none; } a:hover:before { color:red; font-size:24px; content:"ಕನ್ನಡ"; }
尝试使用。 .card-listing:hover::after hover和使用after ::它会工作
BoltClock的答案是正确的。 我想追加的唯一的事情是，如果你只想select伪元素，把一个跨度。
例如：
<li><span data-icon='u'></span> List Element </li>
代替：
<li> data-icon='u' List Element</li>
这样你可以简单地说
ul [data-icon]:hover::before {color: #f7f7f7;}
这只会突出伪元素，而不是整个li元素
您也可以使用右尖括号（“>”）将您的操作限制在一个类中，正如我在此代码中所做的：
<!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>
注意：hover：before开关只适用于.test1类
