One technique I frequently utilize to create SEO-friendly links with images is the CSS trick of text-indent: -9999px;. Essentially, I generate a block-level anchor element with a background image and set its text-indent property to a large negative value so it remains hidden from view, which has positive effects on SEO. However, I have encountered an issue where clicking on the link causes the outline to extend off the page due to the text being positioned far away.
<div>
<a href="#">SEO text</a>
</div>
div {
width: 100px;
height: 100px;
}
div a {
display: block;
text-indent: -9999px;
width: 100px;
height: 100px;
background: url(stuff) etc...;
}
In most cases, the code above results in the outline extending beyond the 100 x 100px area when the link is clicked. Even when dimensions are defined for the parent element, the issue persists. I tried using the a span { display: none; } workaround, but I am seeking a solution that maintains the use of the text-indent trick while fixing the outline problem.
Is there anyone who knows how to resolve this issue? Should I introduce another parent element or adjust a different CSS property?