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

Question

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

H4 {text-decoration: underline;}

如何编辑绘制的'线'，你在线上获得的颜色很容易指定为'color：red'，但是如何编辑线的高度，即厚度？

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”来控制第二个阴影。两者的价值。

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

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

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

Answer 3

很简单...外部“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 4

另一种方法是使用＆＃34;：＆＃34; （伪元素）在要加下划线的元素上。

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 5

我会做一些简单的事情：

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

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

Mapper.Map

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 options的神奇之处，现在可以在本地实现：

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

截至目前，支持相对poor。但这最终会在ff之外的其他浏览器中实现。

Answer 9

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

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

您可以使用line-height值调整下划线位置，使用border-bottom调整下划线粗细和样式。

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

Answer 10

有text-decoration-thickness，目前是CSS Text Decoration Module Level 4的一部分。它处于“编辑草稿”阶段-因此正在进行中，并且随时可能更改。截至2019年12月，仅Firefox支持。

  

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 11

您可以通过将linear-gradient设置为以下方式来实现它：

h1, a {
    display: inline;
    text-decoration: none;
    color: black;
    background-image: linear-gradient(to top, #000 12%, transparent 12%);
}

<h1>I'm underlined</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="https://stackoverflow.com">veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</a> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

是的，您可以像这样更改它...

var m = document.getElementById("m");
m.onchange = u;
function u() {
    document.getElementById("a").innerHTML = ":root { --value: " + m.value + "%;";
}

h1, a {
    display: inline;
    text-decoration: none;
    color: black;
    background-image: linear-gradient(to top, #000 var(--value), transparent var(--value));
}

<h1>I'm underlined</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="https://stackoverflow.com">veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</a> reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<style id="a"></style>
<input type="range" min="0" max="100" id="m" />