Html 编辑 CSS 'underline' 属性的线条粗细
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13840403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Edit line thickness of CSS 'underline' attribute
提问by
Since you can underline any text in CSS like so:
因为您可以在 CSS 中为任何文本加下划线，如下所示：
H4 {text-decoration: underline;}
How can you also then edit that 'line' that is drawn, the color you get on the line is easily specified as 'color: red' but how does one edit the height of the line, i.e. the thickness?
您还如何编辑绘制的“线”，您在线上获得的颜色很容易指定为“颜色：红色”，但是如何编辑线的高度，即粗细？
采纳答案by Pranav ?
Here is one way of achieving this :
这是实现这一目标的一种方法：
HTML :
HTML :
<h4>This is a heading</h4>
<h4><u>This is another heading</u></h4>
?CSS :
？CSS：
u {
text-decoration: none;
border-bottom: 10px solid black;
}?
Here is an example: http://jsfiddle.net/AQ9rL/
这是一个例子：http: //jsfiddle.net/AQ9rL/
回答by anvar
Recently I had to deal with FF which underlines were too thick and too far from the text in FF, and found a better way to deal with it using a pair of box-shadows:
最近我不得不处理下划线太粗并且离FF中的文本太远的FF，并找到了使用一对框阴影处理它的更好方法：
.custom-underline{
box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}
First shadow is put on top of the second one and that's how you can control the second one by varying the 'px' value of both.
第一个阴影放在第二个阴影的顶部，这就是您可以通过改变两者的“px”值来控制第二个阴影的方法。
Plus: various colors, thickness and underline position
加：各种颜色、粗细和下划线位置
Minus: can not use on non-solid backgrounds
减：不能在非纯色背景上使用
Here I made couple of examples: http://jsfiddle.net/xsL6rktx/
在这里我举了几个例子：http: //jsfiddle.net/xsL6rktx/
回答by user4378029
Very easy ... outside "span" element with small font and underline, and inside "font" element with bigger font size.
非常简单......在带有小字体和下划线的“span”元素外部，以及具有更大字体大小的“font”元素内部。
<span style="font-size:1em;text-decoration:underline;">
<span style="font-size:1.5em;">
Text with big font size and thin underline
</span>
</span>回答by Patrick
Another way to do this is using ":after" (pseudo-element) on the element you want to underline.
另一种方法是在要加下划线的元素上使用“:after”（伪元素）。
h2{
position:relative;
display:inline-block;
font-weight:700;
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:3em;
}
h2:after{
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
margin:auto;
background:#000;
height:1px;
}
回答by l2aelba
I will do something simple like :
我会做一些简单的事情，比如：
.thickness-underline {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid black;
margin-bottom: -1px;
}
- You can use
line-heightorpadding-bottomto set possition between them - You can use
display: inlinein some case
- 您可以使用
line-height或padding-bottom来设置它们之间的位置 - 您可以
display: inline在某些情况下使用
Demo :http://jsfiddle.net/5580pqe8/
演示：http : //jsfiddle.net/5580pqe8/
回答by Mihai Rotaru
There is text-decoration-thickness, currently part of CSS Text Decoration Module Level 4. It's at "Editor's Draft" stage - so it's a work in progressand subject to change. As of January 2020, it is only supported in Firefox and Safari.
目前有text-decoration-thickness一部分CSS Text Decoration Module Level 4。它处于“编辑草稿”阶段 - 所以它是一项正在进行的工作，可能会发生变化。截至 2020 年 1 月，它仅在 Firefox 和 Safari 中受支持。
The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
text-decoration-thickness CSS 属性设置用于元素中文本的装饰线的粗细或宽度，例如下划线、下划线或上划线。
a {
text-decoration-thickness: 2px;
}
Codepen: https://codepen.io/mrotaru/pen/yLyLOgr(Firefox only)
Codepen：https://codepen.io/mrotaru/pen/yLyLOgr （仅限 Firefox）
There's also text-decoration-color, which is part of CSS Text Decoration Module Level 3. This is more mature (Candidate Recommendation) and is supported in most major browsers (exceptions are Edge and IE). Of course it can't be used to alter the thickness of the line, but can be used to achieve a more "muted" underline (also shown in the codepen).
还有text-decoration-color，它是CSS Text Decoration Module Level 3 的一部分。这是更成熟的（候选推荐）并且在大多数主要浏览器中都得到支持（Edge 和 IE 除外）。当然它不能用来改变线条的粗细，但可以用来实现更“柔和”的下划线（也在代码笔中显示）。
回答by H.B.
The background-imagecan also be used to create an underline.
该background-image还可以用来创建一个下划线。
It has to be shifted down via background-positionand repeated horizontally. The line width can be adjusted to some degree using background-size(the background is limited to the content box of the element).
它必须通过向下移动background-position并水平重复。可以使用background-size（背景仅限于元素的内容框）在一定程度上调整线宽。
.underline
{
--color: green;
font-size: 40px;
background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
background-repeat: repeat-x;
background-position: 0 1.05em;
background-size: 2px 5px;
}<span class="underline">
Underlined<br/>
Text
</span>回答by viCky
a {
text-decoration: none;
position: relative;
}
a.underline {
text-decoration: underline;
}
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>Final Solution: http://codepen.io/vikrant-icd/pen/gwNqoM
最终解决方案：http: //codepen.io/vikrant-icd/pen/gwNqoM
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
回答by KSPR
Thanks to the magic of new css optionsthis is now possible natively:
多亏了新的css 选项的魔力，现在可以在本地实现：
a {
text-decoration: underline;
text-decoration-thickness: 5px;
text-decoration-skip-ink: auto;
text-underline-offset: 3px;
}
As of yet support is relatively poor. But it'll land in other browsers than ff eventually.
截止目前支持还比较差。但它最终会登陆 ff 以外的其他浏览器。
回答by soleshoe
My Solution : https://codepen.io/SOLESHOE/pen/QqJXYj
我的解决方案：https: //codepen.io/SOLESHOE/pen/QqJXYj
{
display: inline-block;
border-bottom: 1px solid;
padding-bottom: 0;
line-height: 70%;
}
You can adjust underline position with line-height value, underline thickness and style with border-bottom.
您可以使用 line-height 值调整下划线位置，使用 border-bottom 调整下划线粗细和样式。
Beware to disable default underline behavior if you want to underline an href.
如果要为 href 加下划线，请注意禁用默认下划线行为。
