[英]How make text-decoration: underline with 2px padding?
I like an obedient frotend developer must create underline with 2px padding instead of 1px by default.我喜欢听话的朋友开发人员必须使用 2px 填充而不是默认情况下 1px 来创建下划线。 Is exist simple solution for this?
是否存在简单的解决方案?
PS Yeahh guys, I know about div with black backgrond color and 1px * Npx and position: relative, but It's so slowly... PS 是的伙计们,我知道带有黑色背景颜色和 1px * Npx 和 position:relative 的 div,但它是如此缓慢......
You could wrap the text in a span
and give it a border-bottom
with padding-bottom:2px;
您可以将文本包裹在一个
span
并使用padding-bottom:2px;
为其设置一个border-bottom
padding-bottom:2px;
. .
Like so像这样
span{
display:inline-block;
border-bottom:1px solid black;
padding-bottom:2px;
}
Example: http://jsfiddle.net/uSMGU/示例: http : //jsfiddle.net/uSMGU/
A great way to do this without adding and extra spans and having more control is using the :after
selector.在不添加额外跨度并拥有更多控制权的情况下执行此操作的一个好方法是使用
:after
选择器。
Useful especially for navigation menus:特别适用于导航菜单:
.active a:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want more or less space between the text and the underline, add a margin-top
.如果您希望文本和下划线之间有更多或更少的空间,请添加
margin-top
。
If you want a thicker underline, add more height
:如果您想要更粗的下划线,请添加更多
height
:
.active a:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}
For cross-browsing it is better to use text-underline-offset
over the text-underline-position
, because text-underline-position
isn't supported by iOS Safari对于交叉浏览,最好在
text-underline-position
上使用text-underline-offset
,因为iOS Safari不支持text-underline-position
So use this answer: https://stackoverflow.com/a/63607426/1894907所以使用这个答案: https : //stackoverflow.com/a/63607426/1894907
#line{
text-decoration-line: underline;
text-underline-offset: 2px;
}
Simply use:只需使用:
text-decoration: underline;
text-underline-position: under;
how about using border-bottom:1px; padding:what-you-likepx
使用
border-bottom:1px; padding:what-you-likepx
怎么样border-bottom:1px; padding:what-you-likepx
border-bottom:1px; padding:what-you-likepx
#line{ text-decoration-line: underline; text-underline-offset: 1px; }
<div id="line"> Text with line </div>
just use只是使用
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
I used @jake's solution, but it gave me trouble with the horizontal alignment.我使用了@jake 的解决方案,但它给我的水平对齐带来了麻烦。
My nav links are flex row, center aligned and his solution caused the element to shift upwards in order to stay horizontally center-aligned.我的导航链接是 flex 行,居中对齐,他的解决方案导致元素向上移动以保持水平居中。
I fixed it by doing this:我通过这样做修复了它:
a.nav_link-active {
color: $e1-red;
margin-top: 3.7rem;
}
a.nav_link-active:visited {
color: $e1-red;
}
a.nav_link-active:after {
content: '';
margin-top: 3.3rem; // margin and height should
height: 0.4rem; // add up to active link margin
background: $e1-red;
display: block;
}
This will maintain the horizontal alignment for you.
这将为您保持水平对齐。
You can do this with a bit of a hack using ::after elements, and positioning them manually.您可以通过使用 ::after 元素并手动定位它们的一些技巧来做到这一点。 This does mean that you have to maintain the
content
attribute of the after element but you could make this easier by using a data attribute in the html tag and referring to it.这确实意味着您必须维护 after 元素的
content
属性,但您可以通过在 html 标记中使用 data 属性并引用它来简化此操作。 See the example below -看下面的例子——
span:after { font-size: 1rem; position: absolute; content: 'Hello there..'; width: 100%; height: 100%; white-space: pre; text-decoration-skip-ink: none; text-decoration-line: underline; left: 0px; top: 10px; color: white; z-index: -1; text-decoration: underline; text-decoration-style: wavy; text-decoration-color: black; } span { position: relative; }
<span>Hello there</span>
Try this:尝试这个:
.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.