Hide anchor text from bootstrap stretched link with ::after selector

Question

I basically have a card layout and all these cards are made visitable with a link by using the bootstrap stretched-link class.
But since I want my page to be fully SEO friendly, I also added a text to my anchor which kind of makes no sense in a card layout, hence why I wanted to hide the text but still profit from the SEO advantages.

Here comes the problem:
Commonly I used to simply set the font-size of my anchor text to 0, but in this scenario it seems to break the ::after selector and I am still not sure why.

I wanted to ask if anyone knows a possible CSS hack to hide the anchor text but still make the stretched link work.

This is what the stretched-link does btw:

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

IT goldman · Answer

Set its opacity: 0 so it won't be seen. Set its dimension also to zero so it won't affect position of other elements, but yet maintain clickability of stretched link.

.my-link {
  opacity: 0;
  overflow: hidden;
  height: 0;
  width: 0;
  display: block;
}




  
  
    Card with stretched link
    Some quick example text to build on the card title and make up the bulk of the card's content.
    SEO FRIENDLY

Hide anchor text from bootstrap stretched link with ::after selector

1 Answers