Show :after when hovering over the parent element via CSS

Question

Is it possible to display:block; the :after pseudo-element when I hover over the parent element itself?

#myDiv{
   position:relative;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:red;
}
#myDiv:after{
   position:absolute;
   content:"";
   display:none;
   width:50px;
   height:50px;
   border-style:solid;
   background-color:blue;
}

I have tired:

#myDiv:hover #myDiv:after{
    display:block;
}
#myDiv:hover + #myDiv:after{
    display:block;
}
#myDiv:hover > #myDiv:after{
    display:block;
}

Yet no luck, here's a fiddle.

Answer 1

Change it to #myDiv:hover::after

You can use either :after or ::after but in the selectors module (3) it states that the latter is now intended to be used to distinguish them from pseudo-classes

Answer 2

You are trying to reference the same element, so you don't need to duplicate the ID selector. No need to use the child selector either, just use:

#myDiv:hover:after {
    display: block;
}

jsFiddle Demo