文本下划线交叉空格
Text underline crossing whitespace
我一直在尝试构建以下 (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;
}
感谢您的帮助。
您有一个 输入行 围绕这 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
中删除 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;
}
我在淋浴时灵机一动。行距.
起初我在图标上试过这个,但是间距把下划线移到了右边,所以我需要事先把它应用到字母上。
在这里你可以看到我的修改和结果。
<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;
}
点在某些间距值处相互重叠存在一些小问题,但这比其他任何方法都更接近解决方案
我一直在尝试构建以下 (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;
}
感谢您的帮助。
您有一个 输入行 围绕这 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
中删除 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;
}
我在淋浴时灵机一动。行距.
起初我在图标上试过这个,但是间距把下划线移到了右边,所以我需要事先把它应用到字母上。
在这里你可以看到我的修改和结果。
<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;
}
点在某些间距值处相互重叠存在一些小问题,但这比其他任何方法都更接近解决方案