CSS3渐变background-image模拟下划线实例页面

回到相关文章 »

效果:

我是一段文字,链接地址-yeah是下划实线。

我是一段文字,链接地址-yeah是下划虚线。

代码:

CSS代码:
.solid {
    padding-bottom: 2px;
    background-image: linear-gradient(to top, currentColor, currentColor 1px, transparent 1px);
}
.dashed {
    padding-bottom: 2px;
    background: linear-gradient(to right, currentColor, currentColor 4px, transparent 4px) repeat-x 0 bottom/7px 1px;    
}
.dashed:hover,
.solid:hover {
    color: #cd0000;
    text-decoration: none;
}
.solid:hover {
    background-image: linear-gradient(to top, #cd0000, #cd0000 1px, transparent 1px);
}
.dashed:hover {
    background-image: linear-gradient(to right, #cd0000, #cd0000 4px, transparent 4px);
}
HTML代码:
<p>我是一段文字,<a href class="solid">链接地址-yeah</a>是下划实线。</p>
<p>我是一段文字,<a href class="dashed">链接地址-yeah</a>是下划虚线。</p>