如何给伪元素设置伪类？

为元素设置伪类是我们常见的需求，例如给元素设置鼠标悬停高亮效果。

最近在做项目的时候使用到了Element-UI中的字体图标，这里希望为字体图标添加鼠标悬停高亮效果，以达到更好的提示效果。

那首先需要找到该字体图标对应的元素。

![KOPKBU5$B}SP{G8)8H8BB]6.png](p3-juejin.byteimg.com/tos-cn-i-k3…?)

可以看到该图标其实是用伪元素来实现的，下一步就是为其添加 hover效果。

.icon-tuichu::before:hover: {
        color: #ecf0f1;
        cursor: pointer;
      }

但是hover效果并未生效

上面看起来理所当然的写法，实际上是错误的，正确的写法如下：

.icon-tuichu:hover::before {
        color: #ecf0f1;
        cursor: pointer;
      }

这样写之后，才能为元素图标添加 hover效果。

但是查找了一圈也没能找到为什么只有这样写才会生效，非要说的话。可能就是由于 伪类选择器的优先级高于伪元素选择器。