[Resolved] :after not working

[iamarghya]

So in the right sidebar, I have set the latest post widget and I wanted to animate it with a slide color when someone hovers it so I tried to add a :after code in the list element ‘li’ but it didn’t work, can u plz check for me?

[Fernando]

Hi Iamarghya,

Here’s a CSS you may try:

ul.wp-block-latest-posts__list.wp-block-latest-posts li:hover:after {
    z-index: 1;
    width: 100%;
}

Hope this helps!

[iamarghya]

I tried it but it is going over the text but the same code is used on my other site and working perfectly…
Check and see that when hover it is over the text for z-index I think.

[Fernando]

I see.

Try adding this:

ul.wp-block-latest-posts__list.wp-block-latest-posts li a.wp-block-latest-posts__post-title {
    position: relative;
    z-index: 2;
}

This should put the text above the gradient.

[iamarghya]

Perfect Thanks🤗🥰

[Fernando]

You’re welcome! 🙂

[Author]

Posts