Pseudo-class on pseudo-element

Question

OK to be clear, I am not trying to make the (pseudo)inception for css. Just wanted to check if it's possible to add a pseudo class on a pseudo element. For eg:

.some-class:after:hover {
}

doesnt seem to work.

This works though:

.some-class:hover:after {
}

And ofcourse, this doesn't:

.some-class:hover:after:hover {
 }

What I am trying to do is- there is a div. If you hover on that div, I am attaching a delete icon using :after on the div. I want to style this icon (say, have it zoom to 1.1 or so). Is this possible purely on CSS? I just need it to work on Chrome.

Answer 1

No, the current standard does not allow attaching pseudo-classes to pseudo-elements. The only place where a pseudo-element may appear is at the very end of a complex selector, and no other selectors or combinators may appear after it. Refer to the spec.

Some implementations like WebKit have their own rules, but they are non-standard and do not work cross-browser. They may also not apply to all pseudo-classes and/or all pseudo-elements. For example, as far as I know, :after:hover does not work on any browser, Chrome included.

Either way, you will need to use an actual element instead of a pseudo-element.

Answer 2

As already answered by @BoltClock that it is not possible to attach an :hover pseudo on :after so if you want, you can nest an extra element inside your container element and achieve the desired effect.

div {
    height: 300px;
    width: 300px;
    border: 1px solid tomato;
    margin: 20px;
    position: relative;
}

div span {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}

div:hover span {
    display: block;
    transition: font-size .5s;
}

div span:hover {
    font-size: 20px;
}

<div>
    <span>X</span>
</div>

This will give you desired effect without using any JavaScript on your page, only down side of this is that you need to have an extra element so if you don't have any access or permission to modify your HTML then this is not for you unless you can then append an element using JavaScript.