Hover div, change :after pseudo of another div

Question

Is it possible to change a div's pseudo-element :after when hovering over over another div? It would look something like this:

 .div2:after { width: 34px; height: 2px; padding-top: 10px; display: block; margin: 0 auto; content: ""; background-color: red; background-clip: content-box; } .div:hover + .div2:after { background-color: blue; } 

 <div class="div">hover here</div> <div class="div2">...</div> 

I know I could add styles with Js, but a CSS only solution would be nice.

Answer 1

You need to first define the :after pseudo element and give it some content, then you can use the selector you defined to amend the properties on that pseudo element. Try this:

 .div2:after { content: 'FOO'; padding-left: 20px; } .div:hover + .div2:after { color: red; } 

 <div class="div">Hover me!</div> <div class="div2">My :after content changes colour!</div> 

You can amend the :hover state CSS to change whatever properties you require.

Answer 2

Your selector was fine, you just need to define the content:

 .div:hover + .div2:after { content: 'hovering!' } 

 <div class="div">...</div> <div class="div2">...</div> 

Or an example with content both hovering and non-hovering:

 .div2:after { content: 'not hovering' } .div:hover + .div2:after { content: 'hovering!' } 

 <div class="div">...</div> <div class="div2">...</div>