css实现文字自定义下划线

1、文字下划线的实现可以使用原生api：text-decoration:underline

.words{
    font-size: 22px;
    text-decoration: underline;
}

但是没法调整下划线和文字的间距，太贴文字了也不好看

2、于是就有了第二种方法：边框法，就是利用元素的下边框实现下划线的效果，还可以通过line-height调节距离

.words {
    font-size: 22px;
    border-bottom: solid 1px #ccc;
    line-height: 0.9;
}

但是缺点也是致命的，由于下划线是整个元素的，一旦文字换行，就gg了

这种方法没有实际使用价值

3、最后我们迎来了下划线的终极武器：background，利用background-size（控制下划线粗细）、background-position（控制下划线位置）实现高度可定制话的下划线

.words {
    display: inline-block;
    font-size: 22px;
    background: linear-gradient(grey, grey) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.3em;
    text-shadow: 0.05em 0 #fff, -0.05em 0 #fff;
}

 

.dashed {
    display: inline-block;
    font-size: 22px;
    background: linear-gradient(90deg, grey 66%, transparent 0) repeat-x;
    background-size: 0.5em 1px;
    background-position: 0 1.5em;
    text-shadow: 0.05em 0 #fff, -0.05em 0 #fff;
}