CSSでafter要素にホバー効果を使用するにはどうすればよいですか？

Question

これは私のコードです。要素の後ろにホバー効果を表示したいのですが。

#car:after:hover{background:red:} 

しかし、これは機能しません。

Answer 1

下記のデモをご覧ください。私はあなたが不足していると思うcontentプロパティです。

Reddivは、:afterを使用して作成され、ホバーで色が変わります。

selector:after:hoverは機能しません。

.car { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: yellow; 
 
} 
 

 
.car:hover { 
 
    background: skyblue; 
 
} 
 

 
.car:after { 
 
    content: ''; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: green; 
 
} 
 

 
.car:hover:after { 
 
    background: red; 
 
}

<div class="car"></div>