使用after伪元素的CSS活动选择器

Question

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>

suggest me the approach to achieve the active selector using after pseudo selector. 向我建议使用伪选择器之后实现主动选择器的方法。 Thanks in advance. 提前致谢。

Answer 1

The pseudo-element needs to come last: 伪元素需要排在最后：

.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活动选择器

问题描述

1 个解决方案

解决方案1
6 2014-04-10 10:49:58

使用after伪元素的CSS活动选择器

问题描述

1 个解决方案

解决方案1 6 2014-04-10 10:49:58

解决方案1
6 2014-04-10 10:49:58