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>