文本下划线交叉空格

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

您有一个 输入行 围绕这 2 个元素的容器，

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

Answer 2

修改后的答案

看来我误解了你最初的要求。我现在了解到您希望下划线（点）统一显示为锚 ，包括文本和 Font Awesome 图标之间的 space。

这个比之前的答案简单多了。

您首先需要从 HTML 锚中删除默认的文本下划线，这是在下面的 a.link CSS 中完成的。

然后将锚定样式设置为 inline-block/block 级别元素（默认情况下为），并设置 border 而不是 text-underline，因为文本下划线不会（并且在语义上不应该）在缺少文本（白色space ).您还可以使用 padding.

自定义文本和下划线之间的间距

所以：

HTML:

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

然后你设置你的 CSS 样式：

CSS:

.fa-share-square{
    font-size: 0.75rem;
    cursor: pointer;
    color: $secondary-five;
    font-size: 1rem;
}

    a.link {
        color: #900;
        font-size: 1rem;
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 2px dotted #00F;
    }

完整示例：

 .fa-share-square{
        font-size: 0.75rem;
        cursor: pointer;
        color:  #900;
        font-size: 1rem;
    }
    
    a.link {
        color: #900;
        font-size: 1rem;
        text-decoration: none;
        padding-bottom: 3px; /* Set the border distance from the text */
        border-bottom: 3px dotted #00F; /* Set the border style */
    }
    
     .fa-share-square {
      width: 3rem;
      height: 1rem;
      padding-left:1rem;
}

<p>(Extra CSS put in place to show the Font Awesome Icon part)</p>
    <div class="input-row">
        <a class="link" href="#">Acceptable Forms of ID
        <i class="fas fa-share-square">ICON</i></a>
    </div>

CSS Border-bottom.

的手册参考

Answer 3

您只需从 css 中删除 text-decoration 并更新如下。同时为 .link class 设置 text-decoration:none。最后为 class input-row 和 width:fit-content 设置 border-bottom。我用的是color:red，你可以自己选择使用。

HTML代码：

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

已更新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;
        }

Answer 4

我在淋浴时灵机一动。行距.

起初我在图标上试过这个，但是间距把下划线移到了右边，所以我需要事先把它应用到字母上。

在这里你可以看到我的修改和结果。

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

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

点在某些间距值处相互重叠存在一些小问题，但这比其他任何方法都更接近解决方案

文本下划线交叉空格

Text underline crossing whitespace

css

sass

whitespace

underline

修改后的答案