文本下划线跨越空白

问题描述

我一直在尝试构建以下内容（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;
}

感谢您的帮助。

解决方法

您有一个 input-row 容器围绕这 2 个元素，

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

,

修改后的答案

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

这比上一个答案更简单。

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

然后将锚定为内联块/块级元素（默认情况下），并设置border而不是text-underline ，因为文本下划线不会（并且符号上不应该）在缺少文本（空白）时激活。您还可以使用 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 的手册参考。

,

您可以简单地从 text-decoration 中删除 css 并进行如下更新。还要为 text-decoration:none 类设置 .link。最后为 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;
        }

,

我在淋浴时灵光一现。行距。

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

在这里你可以看到我的变化和结果。

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

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