编辑CSS的下划线属性线条粗细

Question

由于您可以在CSS中下划线任何文本，如下所示：

h4 {
  text-decoration: underline;
}

那么如何编辑绘制的“线”并使其更加粗细呢? 线上的颜色可以通过 color: red 轻松指定，但是如何编辑线的高度（即粗细）呢？

- user818700

---

h4 {border-bottom: 10px solid #000;} - Pranav 웃

@PranavKapoor - 很好！太棒了，非常感谢。但现在我该怎么把这个边框的宽度设置为“自动”，这样它只能包围H4标签而不是整个包含div的宽度？ - user818700

你可以添加 display:inline-block 来确保宽度被设置，但是，在 <h4> 内部使用一个元素并对其进行样式设置会更好。请查看下面的答案。 - Pranav 웃

@PranavKapoor - 再次正确！你就像一个CSS忍者。谢谢，伙计。我使用了你在评论中给出的答案，而不是你下面发布的答案。这样做我认为更好，因为你不需要将文本包装在另一个<u>标签中。你可以完全从CSS方面控制它。 - user818700

可能是下划线的粗细的重复问题。 - Jukka K. Korpela

在大多数现代浏览器中，支持新的 CSS 属性，它们应该适合您的需求。 - STh

Answer 1

以下是实现此目的的一种方法：

HTML：

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS：

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}​

这里有一个例子：http://jsfiddle.net/AQ9rL/

- Pranav 웃

---

好的，请提供需要翻译的内容。 - cfx

在这种情况下，您必须将每行文本的换行符前后用<span>包装，并在其中应用border-bottom。虽然这是一种解决方法，但在非硬编码场景中可能会很痛苦。 - Fabián

@cfx 如果你能的话，你仍然可以使用 display: inline; 来实现这个效果（但它将不再是任何块级元素了，但可能对某些人有帮助）。 - jave.web

你让我的一天变得美好。谢谢。 - Trect

这将导致布局发生变化。边框会强制其他元素移动，而下划线则不会。 - Joel Karunungan

Answer 2

最近我不得不处理FF的下划线太厚，离文本太远的问题，并找到了使用一对box-shadow更好的解决方法：

.custom-underline{
  box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

将第一个阴影放在第二个阴影上方，通过改变两者的“px”值来控制第二个阴影。

优点：可以使用各种颜色、厚度和下划线位置。

缺点：不能在非实心背景上使用。

这里有几个示例：http://jsfiddle.net/xsL6rktx/

- anvar

---

多好啊。对于 border-bottom，这个专业术语（至少对我来说）的优点在于“线”的厚度向文本增长，这使得文本和线之间的间隙不那么巨大。 - Victor Häggqvist

当我这样做时，除了下划线之外，我还会得到半像素的垂直线。 - yeahdixon

似乎曾经是一个完美的答案，但在Chrome 66中，在元素的两侧出现了非常细的垂直线。 - little tiny man

使用 透明 而不是白色，可以适用于任何背景。 - Jay Dadhania

这是最佳答案。没有必要改变HTML和纯CSS解决方案，这不会像边框一样改变位置。 - Joel Karunungan

请记住，box-shadow会消耗大量的CPU资源。 - viCky

Answer 3

目前在CSS Text Decoration Module Level 4中有一个名为text-decoration-thickness的属性，它用于设置在元素中使用的装饰线（如删除线、下划线或上划线）的粗细或宽度。该属性处于“编辑者草案”阶段，因此仍在进行中且可能会有所更改。截至2022年10月，该属性已经覆盖了约93%，因此可以放心使用。

text-decoration-thickness CSS 属性可用于设置元素中文本所使用的装饰线（如删除线、下划线或上划线）的粗细或宽度。

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr（仅限Firefox浏览器）

---

还有text-decoration-color，它是CSS文本修饰模块3级的一部分（CSS Text Decoration Module Level 3）。这更成熟（候选推荐），并且在大多数主流浏览器中得到支持（IE和Edge除外）。当然，它不能用于改变线条的粗细，但可以用于实现更柔和的下划线效果（也在代码笔记中展示）。

- Mihai Rotaru

---

如果用户使用Firefox，所有文本装饰都可以在text-decoration中访问。我不知道是否计划将其包含在所有浏览器中，但如果是这样的话，未来会非常好。编辑：这是一个工作草案，支持在text-decoration中实现此功能。 - Stormblessed

目前来看，这个属性很有趣，但在许多浏览器中并不真正起作用。https://css-tricks.com/almanac/properties/t/text-decoration-thickness/#browser-support - viCky

Answer 4

非常容易将字体设置为蓝色，并且可以添加小字号和带下划线的“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>

- user4378029

---

еҰӮжһңдҪ з”ЁжңҖж–°зҡ„spanж ҮзӯҫжқҘжӣҝд»ЈиҝҮж—¶зҡ„<font>ж ҮзӯҫпјҢиҝҷе°ҶжҳҜе”ҜдёҖдёҖдёӘзңҹжӯЈеӣһзӯ”иҝҷдёӘй—®йўҳзҡ„зӯ”жЎҲгҖӮ - matteo

Answer 5

另一种方法是在您想要下划线的元素上使用“: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;
}

- Patrick

---

类似的答案在这里：https://dev59.com/5GAg5IYBdhLWcg3whrMV#23502743 - Ari

Answer 6

我会做一些简单的事情，比如：

.thickness-underline {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid black;
  margin-bottom: -1px;
}

• 你可以使用line-height或padding-bottom来设置它们之间的间距。
• 在某些情况下，您可以使用display: inline。

示例：http://jsfiddle.net/5580pqe8/

- l2aelba

---

很遗憾，margin-bottom不能取负值。 - soleshoe

@soleshoe 这是不正确的，一个元素底部可以有负边距。 - Alex

Answer 7

< p > background-image也可以用于创建下划线。这种方法可以处理换行。

必须通过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>

- H.B.

---

您也可以对其进行动画处理，这很不错。 - corn on the cob

Answer 8

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>

最终解决方案： http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

- viCky

---

问题在于不同的浏览器会以不同的方式呈现下划线。 - Joel Karunungan

Answer 9

感谢新的 css选项的魔法，现在这是原生可行的：

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

目前支持相对较差。但它最终会在除了ff以外的其他浏览器中出现。

- KSPR

Answer 10

我的解决方案： https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

您可以使用line-height值来调整下划线的位置，使用border-bottom来设置下划线的粗细和风格。

请注意，如果要在href中添加下划线，请禁用默认的下划线行为。

- soleshoe