2つの擬似セレクタがそれぞれCSS #idで動作しませんでした：after：active {}

Question

車のホイールをクリックする必要がありますので、車は100px進みます。この場合のホイールは「後」ですが、 "：after：active"セレクタでは動作しませんが、他のセレクタでは動作します。どうすれば修正できますか？

PS：私はクロムを使用しています。

#Car{ 
height: 30%; 
width: 30%; 
background-color: blue; 
position:relative; 
bottom:20%; 
left: 30%; 
top:-40%; 
border-top-right-radius : 20% 30%; 
border-bottom-right-radius : 20% 30%;} 

#Car:after{ 
content:""; 
height: 50%; 
width: 20%; 
position: absolute; 
left: 50%; 
top:90%; 
border-radius: 50%; 
background: #cc7b0f; 
border: 10px solid grey; 
z-index:6; 
} 

#Car:after:active{ 
transform: translate(100px, 0px); 
transition:ease-in-out; 
} 

Answer 1

あなたのセレクタCar:after:activeを意味するもの

:after element that is :active should have rules{*translate*} 

ですが、あなたがここで必要なのは

です

#Car that is :active has :after element which should have rules{*translate*} 

ので、あなたは

#Car:active:after 

Answer 2

擬似要素、すなわち、最後に来なければならない：

#Car:active:after 

https://jsfiddle.net/s1krLby1/