Making HTML anchor tag cover the icon

Hi Kelvin,

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Please see private information field.

You can see the screenshot in private information field

Hi Kevin,

Try this CSS:

.gb-container-170094c5 .gb-headline >.gb-headline-text >a:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
}
.gb-container-170094c5 .gb-headline {
    position: relative;
}

Let me know :)

Dear Ying,

Yes, it works, from web inspector, the icon is not inside the anchor, they are separated, how does the css works? Could you explain a bit? So that I can manage if I face similar problem.

Best regards,

Kelvin.

I added a pseudo-element to the link which is the a element.
https://www.screencast.com/t/DlOtz9sss7g
It's like the extension of the a element.

I also made the pseudo-element big enough to cover the entire headline block, so when you hover on the icon and text, you are actually hovering on the pseudo-element.

It's just purely CSS skill, not theme related :)