需求：

今天开发遇到一个需求 想给文字添加下划线

不懂字体基线的 可以百度下，需求如下图：

分析过程

前提：在这个需求之前我已经先将短文单词拆解 每一个单词独立为一个元素

因为内容是英文 需要帖子字母的基线添加下划线

如果使用 text-decoration:underline  solid #ffe60f; 只能给文本内容加上一个1px的实线下划线 如下图：

探索方法：

结果产品不满意 那咱先继续改 于是想到了两种方法：

1.使用 border 属性 border的话 是可以设置宽度的 但是border不是针对文本的 而是针对整个元素的

上网查询 有人介绍使用 border 和 padding 来控制border的距离 但是他的例子是将border向下移动 我的需求是向上移动 贴住文本的基线 那怎么对padding使用 负值呢？

结果。。尝试失败 padding的负值 不能缩小元素的大小 从而改变border的位置 他和 margin完全不同 margin的负值可以做到

方法1结论：使用border只能将下划线向下移动

2.使用 css伪类 before 和 after + border + 绝对定位的方法 实现下划线

我的思路是 文本本身使用相对定位 将伪类的高度设置为1em 宽度100% 这样就和文本的宽高相同 使用绝对定位 设置 left:0 然后给伪类一个 border-bottom:4rpx solid #ffe60f

代码如下：

结果如下图：

嗯 还不错 但是美中不足的是 这个下划线将原文文本遮挡了 尝试使用z-index控制层级 强制将伪类下划线挪到下面 代码如下：

嗯 果然不好使。。。结果视图没变 开发工具和真机测试一样 都没变化 看来这个伪类的层级控制是失效的

不过庆幸的是 这个效果 在产品经理那边通过了 他还说了一句 果然慢工出细活！。。

我顿感无语

顺便提下 那个 height:1.1em；是将下划线又向下移动了0.1em的距离 因为 设置 1em 还会遮挡文本内容的最下面

方法2结论：使用伪类+绝对定位的方法 能随意控制下划线的位置 不仅可以上下 还可以左右移动 甚至可以添加旋转效果 美中不足的是 小程序里会遮挡文本内容

注意：在小程序里 就算使用 text-decoration 属性也会出现在 g p f y 这样的字母下方下划线断档的情况 如下图

以上就是关于 如何 控制 文本下划线的分享和摸索过程 ！希望能帮到你 不足之处 欢迎指正