CSS使用after伪元素的active选择器

Question

CSS使用after伪元素的active选择器

5

我有一个问题，需要在after伪类选择器上实现活动图标选择器。以下是我的代码：

<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>

Light Dark

请为我建议一种使用伪类选择器:after来实现活动选择器的方法。提前感谢您的帮助。

- Anandh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

伪元素需要放在最后面：

.name:active:after{
background-image: url('light.png');
}

如果你想只在伪元素被激活时改变伪元素样式，这是不可能的。请参见此答案以获取解释。