控制文本修饰的下划线位置:下划线
有没有办法控制文本修饰中下划线的位置:下划线？
<a href="#">Example link</a>
上面的例子默认有一个下划线...有没有办法轻推下划线几个像素,以便文本和下划线之间有更多的空间？
Ry-*_*Ry- 54
唯一的方法是使用边框而不是下划线.众所周知,下划线是不灵活的.
a {
border-bottom: 1px solid currentColor; /* Or whatever color you want */
text-decoration: none;
}
这是一个演示.如果空间不够,你可以轻松添加更多 - 如果太多,那就不那么方便了.
- @Blowsie:它在`inline`元素上; 尝试调整小提琴框架的大小. (7认同)
- 值得注意的是,`border`不会像`underline`那样换行. (4认同)
Bry*_*lis 17
你可以在这之前和之后使用伪.它运作良好,完全可定制.
CSS
p {
line-height: 1.6;
}
.underline {
text-decoration: none;
position: relative;
}
.underline:after {
position: absolute;
height: 1px;
margin: 0 auto;
content: '';
left: 0;
right: 0;
width: 90%;
color: #000;
background-color: red;
left: 0;
bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}
HTML
<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>
这是一个更高级的演示,附带截图我制作的动画显示 悬停,更改颜色等下划线...
http://codepen.io/bootstrapped/details/yJqbPa/
Juk*_*ela 14
text-underline-position在CSS 3中有提议的属性,但它似乎尚未在任何浏览器中实现.
因此,您需要使用抑制下划线和添加底部边框的解决方法,如其他答案中所建议的那样.
请注意,下划线不会添加到元素的总高度,而是添加到底部边框.在某些情况下,您可能希望使用outline-bottom- 这不会增加总高度 - 而是(尽管它没有得到广泛支持border-bottom).
- 那只会允许将线放在另一侧，而不能更改文本和线之间的距离。 (2认同)
2021年
您可以使用 text-underline-position: under;
<body>
<h1>
<a href="#"
style="text-decoration: underline; text-underline-position: under;" >
My link</a>
</h1>
</body>有关更多详细信息，请查看https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
2021年
CSS Text Decoration Module Level 4 中有一个text-underline-offset属性，它允许您将装饰从其原始位置移动指定的距离。
截至 2020 年初，仅 Safari 12.1+ 和 Firefox 70+ 支持此功能。
text-underline-offset 属性接受以下值：
auto- 默认，使浏览器选择合适的偏移量。from-font- 如果使用的字体指定了首选偏移量，则使用该偏移量，否则返回到auto.<length>- 以“通常的”CSS 长度单位指定距离。使用em允许与比例缩放font-size。
下面的例子：
p {
text-decoration: underline;
text-decoration-color: red;
margin-bottom: 1.5em;
}
p.test {
position: relative;
}
p.test::after {
position: absolute;
content: '';
display: block;
height: 1px;
width: 100%;
background: blue;
bottom: 0;
}<p style="text-underline-offset: 0.75em;" class="test">
If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>
<p style="text-underline-offset: auto">
And now let’s try it with `text-underline-offset` set to `auto`.
</p>
<p style="text-underline-offset: from-font">
With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>