css - 文本下划线跨越空格

Question

我一直在尝试构建以下内容(figma):

就目前情况而言，我已经尝试过填充、边距、伪元素、空格，但我很不知道该怎么做。您可以看到图标上可以有下划线样式，但是当我创建距“ID”的距离时，会出现下划线间隙。我需要图标保持尽可能远的距离，但也保持下划线交叉。

HTML:请注意，在此实例中无法设置“input-row”的样式，因为它在其他元素中使用

<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;
}

感谢您的帮助。

Answer 1

您在这两个元素周围有一个输入行容器，

向容器添加下划线，使用边距和/或填充使其位于文本正下方。