UI设计中，文本底部添加下换线

aiqu2133

于 2019-07-26 17:23:00 发布

阅读量193

点赞数

文章标签： ui 前端 ViewUI

原文链接：http://www.cnblogs.com/zty-Love/p/11251718.html

版权

在小程序前端开发中，为解决文本下划线过粗的问题，本文介绍了一种使用CSS transform属性scaleY来实现更细下划线的方法，适用于需要精细控制线高和宽度的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在开发项目，针对小程序前端，显示文本需要添加下划线问题，起初是通过border-bottom:1rpx solid #eee; 进行编写，但是总是觉得线的高度过于粗，移动端最小单位值是 1 即:1rpx 1px,高度设置0.3是不生效的，后面看到相关博客通过 scale进行划线，在这记录下：

<div class="line-bottom">
zty
</div>

.line-bottom{
   position:relative;
}
.line-bottom:after{
   content:" ";
   position:absolute;
   left:0;
   bottom:0;
   width:100%;
   height:1px;
   transform:scaleY(.5);
   background-color:#eeeeee;
}

转载于:https://www.cnblogs.com/zty-Love/p/11251718.html