如何解决文本下划线跨越空白
就目前而言,我已经尝试过填充、边距、伪元素、空格,但我很不知道该怎么做。您可以看到可以在图标上使用下划线样式,但是当我创建与“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;
}
点在某些间距值处相互重叠的一些小问题,但这比其他任何东西都更接近解决方案
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。