编辑CSS“下划线”属性的线宽

由于您可以在CSS中加下划线，如下所示：

H4 {text-decoration: underline;}

然后，您又如何编辑绘制的“线”，您轻松地将在线上获得的颜色指定为“颜色：红色”，但是如何编辑线的高度（即粗细）呢？

这是实现此目的的一种方法：

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/

最近，我不得不处理FF，该FF的底线太粗了，与FF中的文本相距太远，并找到了一种更好的方法来使用一对盒子阴影来处理它：

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

第一个阴影位于第二个阴影的顶部，这就是您可以通过更改两个阴影的“ px”值来控制第二个阴影的方法。

加：各种颜色，厚度和下划线位置

减号：不能在非实心背景上使用

在这里，我举了几个例子：http : //jsfiddle.net/xsL6rktx/

非常容易...在“ 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>

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

}

还有text-decoration-thickness，目前的部分CSS文本装饰模块4级。它处于“编辑草稿”阶段- 正在进行中，可能随时更改。从2020年1月开始，仅Firefox和Safari支持它。

text-decoration-thickness CSS属性设置装饰线的粗细或宽度，该装饰线用于元素中的文本，例如直通，下划线或上划线。

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

Codepen：https：//codepen.io/mrotaru/pen/yLyLOgr （仅Firefox）

还有text-decoration-color，这是CSS Text Decoration Module Level 3的一部分。这是更成熟的（候选推荐书），并且在大多数主流浏览器中都受支持（Edge和IE除外）。当然，它不能用于更改线条的粗细，但可以用于获得更“静音”的下划线（也显示在代码笔中）。

我将做一些简单的事情：

.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/

的 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>

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;
}

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

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

您可以使用线高值调整下划线位置，使用边框底线调整下划线粗细和样式。

如果要在href上加下划线，请当心禁用默认的下划线行为。

借助新的CSS选项的神奇功能，现在可以在本地进行以下操作：

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

截至目前，支持相对较差。但是最终它将在ff之外的其他浏览器中使用。