其实可以写个div，给div的下边框加上线条，控制div的长度就可以了
.token {width: 300px
border-bottom: 1px solid black
}
<div class="token">外婆家私房菜:账户管理</div>
使用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>
