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

Question

因为您可以在CSS中为任何文本加下划线:

H4 {text-decoration: underline;}

你怎么能编辑绘制的'线',你在线上得到的颜色很容易指定为'颜色:红色'但是如何编辑线的高度,即厚度？

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/

Answer 2

最近我不得不处理FF,这些FF的下划线太厚而且距离FF中的文本太远,并找到了一种更好的方法来处理它使用一对盒阴影:

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

第一个阴影放在第二个阴影之上,这就是你可以通过改变两者的"px"值来控制第二个阴影.

加:各种颜色,厚度和下划线位置

减:不能在非实体背景上使用

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

Answer 3

目前有text-decoration-thickness一部分CSS Text Decoration Module Level 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 除外）。当然它不能用来改变线条的粗细，但可以用来实现更“柔和”的下划线（也在代码笔中显示）。

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>

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;

}

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/

Answer 7

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

Answer 8

多亏了新的css 选项的魔力，现在可以在本地实现：

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

截止目前支持还比较差。但它最终会登陆 ff 以外的其他浏览器。

Answer 9

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