Question

I want to achieve the following:

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

Is it possible to make it happen on the ::after using just CSS (no JavaScript/JQuery)?

This is what I tried, but it does not seem to work:

#a:hover + #a::after {
    background: #ccc
}

#a::after {
  content: "\a Div B";
  white-space: pre;
}

<div id="a">Div A</div>

Or do I really require JavaScript to get the job done for such functionality?

Answer 1

Maybe simply this:

Don't forget that the pseudo-element is a child of the current element and not a sibling element.

#a::after {
  content: "Div B";
  display:block;
}
#a:hover::after {
    background: #ccc
}

<div id="a">Div A</div>