Text underline crossing whitespace

Question

I've been attempting to build the following (figma):

As it stands i've tried padding, margins, psudeo elements, whitespaces and I'm pretty stuck on what to do. You can see its possible to have the underline styles on the icon, but when I create distance from 'ID', the underline gap appears. I need the icon to stay as far away as it is here but also keep the underline crossing.

HTML: Please note 'input-row' cannot be styled in this instance as it's used across other elements

<div class="input-row">
    <a class="link" href="#">Acceptable Forms of ID    <i class="fas fa-share-square"></i></a>
</div>

.fa-share-square{
    font-size: 0.75rem;
    cursor: pointer;
    color: $secondary-five;
    font-size: 1rem;
    text-decoration: underline dotted $secondary-five;
    text-underline-offset: .5rem;
    text-decoration-thickness: 2px;
}

.link{
    color: $secondary-five;
    font-size: 1rem;
    text-decoration: underline dotted $secondary-five;
    text-underline-offset: .5rem;
    text-decoration-thickness: 2px;
}

Thanks for your help.

Answer 1

You can simply remove text-decoration from your css and update as follows. Also set text-decoration:none for the .link class. Finally set border-bottom for the class input-row and width:fit-content. I am using color:red, you can use of your own choice.

HTML code:

<div class="input-row">
    <a class="link" href="#">Acceptable Forms of ID    <i class="fas fa-share-square"></i></a>
</div>

Updated CSS:

.fa-share-square {
            font-size: 0.75rem;
            cursor: pointer;
            color: red;
            font-size: 1rem;
            /*text-decoration: underline dotted red;
            text-underline-offset: .5rem;
            text-decoration-thickness: 2px;*/
        }

        .link {
            color: red;
            font-size: 1rem;
            text-decoration: none;
            /*text-decoration: underline dotted red;
            text-underline-offset: .5rem;
            text-decoration-thickness: 2px;*/
        }

        .input-row {
            border-bottom: 2px dotted red;
            width: fit-content;
        }