32.给文字加上下划线

[ccforward]

给文字加上下划线 - 《css揭秘》笔记

其实很简单：

text-decoration: underline

或者

a[href] {
    border-bottom: 1px solid #333;
    text-decoration: none;
}

虽然用 border-bottom 模拟下划线可以对颜色、线宽、线型进行控制，但是明显这些下划线和文本之间的间距太大。如图：

当然可以给a标签加一个 display:inline-block; 再制定一个小一点的 line-height:

display: inline-block;
border-bottom: 1px solid #333;
line-height: .9;

但是一旦换行就悲剧了，阻止了正常的文本换行：

其实还可以用一层内嵌的 box-shadow: 0 -1px #333 inset让鲜花县李文本近一些，但是微乎其微只是近了线宽那么一点的距离，不明显。

解决方案

最佳的解决方案是用意想不到的 background-image

background: linear-gradient(#f00, #f00) repeat-x;
background-size: 100% 1px;
background-position: 0 1em;

这样就显得很优雅柔和了

不过还有问题，字母 p 和 y 被下划线穿过了，如果遇到字母能自动避开会更好，所以，加入背景是一片实色，即可以设置两层与背景色相同的 text-shadow 来模拟这种效果

background: linear-gradient(#f00, #f00) repeat-x;
background-size: 100% 1px;
background-position: 0 1em;
text-shadow: .05em 0 #fff, -.05em 0 #fff;

使用背景渐变来实现下划线可以做到相当灵活的转换：

比如一条绿色虚线下划线

background: linear-gradient(90deg, #f00 70%, transparent 0) repeat-x;
background-size: .2em 2px;
background-position: 0 1em;
text-shadow: .05em 0 #fff, -.05em 0 #fff;

通过色标的百分比调整虚线的虚实比例， 用 background-size 来调整虚线的疏密。

demo地址