Pseudo-class on pseudo-element
OK, to be clear, I am not trying to create (pseudo) css. Just wanted to check if the pseudo class can be added to the pseudo element. For example,
.some-class:after:hover {
}
doesn't seem to work.
This works though:
.some-class:hover:after {
}
And of course it doesn't:
.some-class:hover:after:hover {
}
What I am trying to do is a div. If you hover over this div I add a delete icon using: after on the div. I want to style this icon (say, increase it to 1.1 or so). Is this possible exclusively in CSS? I just need it to work in Chrome.
source to share
No, the current standard does not allow pseudo-classes to be attached to pseudo-elements. The only place a pseudo-element can appear is at the very end of a complex selector, and no other selectors or combinators can appear after it. Refer to specification .
Some implementations, such as WebKit, have their own rules, but these are non-standard and don't work cross-browser. They also may not apply to all pseudo-classes and / or all pseudo-elements. For example, as far as I know, :after:hover
does not work in any browser, Chrome is enabled.
You will need to use the actual element instead of the pseudo element anyway.
source to share
As @BoltClock already answered that it is not possible to attach an alias :hover
to :after
, so if you want you can nest an additional element inside your container element and achieve the effect you want.
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 the effect you want without using any JavaScript in your page, only at the bottom of this you need to have an extra element, so if you don't have access or permission to change the HTML code, this is not the case for you if you don't can add an element using JavaScript.
source to share