a：hover：before-似乎无法理解它的作用？ [重复]

Question

此问题已经在这里有了答案：

How to write :hover condition for a:before and a:after?（6个答案）

[<11天前关闭。

所以我实际上遇到了一些使用此选择器的代码，但我似乎并没有真正得到它。

我也尝试过在Google上搜索，但没有得到明确的答案。

我的问题是：

此选择器是在a：hover之前（之前）选择一个伪元素（抱歉）。还是使用这种方式来选择a：before的状态？

谢谢。

Answer 1

a:hover::before本质上是在将鼠标悬停在<a>标签上时，在<a>标签之前将以下样式应用于伪元素。

伪选择器::after的功能相同，但默认情况下将内容放置在标签之后，而不是之前。

请考虑以下片段：

a:hover { background: red; color: white; }

<a>hello</a>

 
a::before { content: 'boo'; background: red; color: white; }
<a>hello</a>
 
a:hover::before { content: 'boo'; background: red; color: white; }
<a>hello</a>
在MDN上的进一步读数：::before ::before