怎么给伪元素after添加hover效果

2021-11-18 19:14发布

10条回答

2021-11-19 14:17

当有一个元素上面有一个伪元素时，像给这个伪元素设置一个 hover 效果，当该伪元素 hover 时，才显示该伪元素。

元素：

li {    background: red;
}li:after {    border: 1px solid blue;    
}

这个时候，先在该伪元素所在的元素上加上 hover，然后在 hover 后面加上 :after 即可。

例如，接着上面例子中的代码，继续写如下代码：

li:hover:after {    border: 1px solid blue;
}

加上上面代码后，即可实现只有当 hover 时，显示该伪元素。注意顺序，hover 在前面，after 在后面。