How to hide url link in edit mode until hovered on?

Over the years there were several related topics but solutions from them no longer work:
How to make the url link shorter in edit mode? - Help - Obsidian Forum
Hide or Truncate URLs in Editor using CSS? (one year later) - Help - Obsidian Forum
Hide or Truncate URLs in Editor using CSS? - Help - Obsidian Forum

Problem:

Some links are very long and when they expand they are very distracting.
Often I don’t need to see the exact link and want to only edit the title of the link because I’m used to editors like workflowy (mentioned here How to make the url link shorter in edit mode?).

Why current default editor’s behaviour doesn’t help:

Current behaviour (Version 1.5.12) shows only link title and shows URL only if cursor is on title.
Title can be very long and if I have multiple links on each line moving cursor vertically can be distracting as they expand.

Solution:

CSS snippet that replaces link URL with a emoji and shows it only if you hove mouse over it.

This also perfectly works on iOS devices. (Tap next to link to put cursor, drag cursor to the link, then tap on emoji to show URL)

This forum is very confusing, I couldn’t publish edits to my post and I couldn’t delete the post, so here is the end of the post:

You will need to install CSS snippet below.
(Instructions for installing snippet are provided in this video: https://youtu.be/UM7HH_sGRxs)

CSS code:

/* Hide the URL text and show the symbol */
div.cm-line .cm-string.cm-url:not(.cm-formatting) {
    font-size: 0;
}

/* Display a symbol after the URL */
div.cm-line .cm-string.cm-url:not(.cm-formatting)::after {
    content: '🔗'; /* Replace with your desired symbol */
    font-size: 1rem; /* Adjust font size as needed */
    color: inherit; /* Inherit color from the parent element */
}

/* Ensure the URL text is visible when the cursor is over it */
div.cm-line .cm-string.cm-url:not(.cm-formatting):hover {
    font-size: inherit;
}

/* Hide the symbol when the cursor is over the URL */
div.cm-line .cm-string.cm-url:not(.cm-formatting):hover::after {
    content: '';
}

I’m not very savvy about WEB development, but managed to make it with GPT, here is the example how you can do it:
https://chatgpt.com/share/08b68648-4fab-4017-9d2c-c3011050d738

DEMO:
Screen Recording 2024-06-01 at 20.29.11