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

小开

最佳答案

以下是实现这一目标的一种方法:

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 中的文本太远，并找到了一个更好的方法来处理它使用一对方框阴影:

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

小开

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

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

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

演示: < a href = “ http://jsfiddle.net/5580pqe8/”rel = “ nofollow noReferrer”> http://jsfiddle.net/5580pqe8/

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

小开

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 下划线，请注意禁用默认下划线行为。

小开

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>

小开

还有 text-decoration-thickness，目前是文字装饰模组第4级的一部分。这是在“编辑的草稿”阶段-所以它是一个 正在进行中的工作和可能的变化。截至2022年10月，有93% 的覆盖率使用起来相当安全。

文本装饰厚度 CSS 属性设置厚度，或元素中用于文本的装饰线的宽度，如作为直线、下划线或者覆盖线。

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

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr(仅限 Firefox)

还有 text-decoration-color，它是文字装饰模组第3级的一部分。这是更成熟的(候选推荐) ，并在大多数主流浏览器(边缘和 IE 例外)支持。当然，它不能用来改变线的厚度，但可以用来实现一个更“柔和”的下划线(也显示在代码部分)。

小开

多亏了新 Css 选项的魔力，现在天生就可以做到这一点:

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

到目前为止支持的浏览器还是相对贫穷的，但是它最终会登陆其他浏览器而不是 ff。

小开

现在，如下图所示，该属性在大多数浏览器中都得到了完全支持(根据 Mozilla)。

因此，您可以使用以下属性:

.thin {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 1px;
}


.thick {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 5px;
}


.shorthand {
text-decoration: underline solid red 5px;
}

(来自 Mozilla的示例代码)。