使用after伪元素的CSS活动选择器 [英] CSS active selector using after pseudo element
本文介绍了使用after伪元素的CSS活动选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在伪选择器之后打开活动图标选择器时遇到问题.下面是尝试过的代码.
I have a problem to achieve on active icon selector on after pseudo selector. Below is the code which am tried.
<html>
<head>
<style type="text/css">
.btn{
width:25%;
}
.name{
background: #fff;
color: #000;
text-align: center;
height: 35px;
line-height: 35px;
font-size: 18px;
border: 1px solid;
}
.name:after{
content: "";
position: absolute;
left: 210px;
top: 19px;
background-image: url('dark.png');
width: 15px;
height: 15px;
background-size: 100% auto;
}
.name:after:active{
background-image: url('light.png');
}
</style>
</head>
<body>
<div class="btn name">Submit</div>
</body>
</html>
建议我使用after伪选择器来实现主动选择器的方法.预先感谢.
suggest me the approach to achieve the active selector using after pseudo selector. Thanks in advance.
推荐答案
伪元素需要排在最后:
.name:active:after{
background-image: url('light.png');
}
如果仅在激活伪元素时才希望更改伪元素样式，则不可能.有关说明，请参见此答案
If you're looking to change the pseudo-element style only when the pseudo-element is activated, that's not possible. See this answer for an explanation.
这篇关于使用after伪元素的CSS活动选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
