编辑CSS'underline'attibute的线条粗细
既然你可以在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中的文本太重和太远了，并且find了一个更好的方法来使用一对盒子来处理它：
.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; }
我会做一些简单的事情：
.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/
最终解决scheme： http : //codepen.io/vikrant-icd/pen/gwNqoM
a.shadow { box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue; }
我的解决scheme： https : //codepen.io/SOLESHOE/pen/QqJXYj
{ display: inline-block; border-bottom: 1px solid; padding-bottom: 0; line-height: 70%; }
您可以使用线条高度值调整下划线位置，使用边框底部下划线粗细和样式。
如果您想要强调href，请注意禁用默认的下划线行为。
