其实可以写个div，给div的下边框加上线条，控制div的长度就可以了
.token {width: 300px
border-bottom: 1px solid black
}
<div class="token">外婆家私房菜:账户管理</div>
1、如果想修改一下下划线的颜色，大小等样式就可以通过border属性来设计，使用起来更灵活。
2、border-bottom属性，用来设置底部的边框样式。
3、border-bottom: #FF0000 2px solid 设置边框大小为2PX的红色边框。
4、看一样效果，发现下划线是整个屏幕的宽度，所以接下来要修改一下宽度。
5、宽度设置成180px，宽度根据 实际情况调整就可以了。
6、最后显示下划线效果。
使用padding-bottom样式实现字体文字下划线距离设置。
传统的css下划线text-decoration样式只能设置其文字下划线样式而无法实现下划线与文字间距调整。所以借助与padding属性模拟下划线实现文字与下划线之间距离可调节。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>文汇建站</title>
<style>
.divcss5-x5{ padding-bottom:5px text-decoration:underline}
.divcss5-x10{ padding-bottom:10px text-decoration:underline}
</style>
</head>
<body>
<p>
下划线divcss5距离调节实例
<span class="divcss5-x5">我下划线距离为5px</span>,
<span class="divcss5-x10">我的下划线距离为10px</span>
</p>
</body>
</html>
