Tutorial
If you are unable to read the whole thing, please scroll.
If you’ve ever shared a link on this forum, you’ve no doubt witnessed the annoyance of those pesky “link numbers”. Well, today, I will show you how to make them completely vanish!
1) Add the link inside your text using the anchor (<a>) tag.
1a) (optional) Ask someone or use an alt to click on the link to make the link number appear.
<a href="https://www.google.com/">This is an example.</a>
2) Add an outer span with a background-color around your text.
<span style="font-size:; background-color: red;"><a href="https://www.google.com/">This is an example.</a></span>
3) Specify width until your text touches the right edge of the box.
3a) In order to specify width, don’t forget to add in display: block!
<span style="font-size:; background-color: red; display: block; width: 121px;"><a href="https://www.google.com/">This is an example.</a></span>
4) Add white-space: nowrap
to your inline css.
4a) The white-space property specifies how white space is treated in code.
4b) Refer to this page for more details on how it works and to test it out.
<span style="font-size:; background-color: red; display: block; width: 121px; white-space: nowrap;"><a href="https://www.google.com/">This is an example.</a></span>
5) Add overflow: hidden
to your inline css.
<span style="font-size:; background-color: red; display: block; width: 121px; white-space: nowrap; overflow: hidden;"><a href="https://www.google.com/">This is an example.</a></span>
6) Now that the link number is gone, you can remove the background-color!
<span style="font-size:; display: block; width: 121px; white-space: nowrap; overflow: hidden;"><a href="https://www.google.com/">This is an example.</a></span>
And, just like that, we were able to hide the link number!