5

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>

LightDark

suggest me the approach to achieve the active selector using after pseudo selector. Thanks in advance.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Anandh
  • 77
  • 1
  • 2
  • 8

1 Answers1

10

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • @Prashant: I'm not sure you understood either of my answers that you commented on. Please read them again. – BoltClock Nov 23 '14 at 06:29
  • If you don't need/want the parent element to handle pointer events, then you can put `pointer-events: none;` on the parent and `pointer-events: auto;` on the pseudo-element. This will cause the pseudo-element style to occur only when the pseudo-element is activated and nothing will happen if the parent is activated. – BigMacAttack Dec 09 '15 at 21:29