i. The Coder's Society

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! :sparkles:

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.

image

<a href="https://www.google.com/">This is an example.</a>

2) Add an outer span with a background-color around your text.

image

<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!

image

<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.

image

<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.

image

<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!

image

<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! :sparkles:

5 Likes