在浏览网页的时候，经常看到有些链接的下划线是虚线，或者鼠标移动到链接上时链接下面显示的是虚线，而不是实线。

    这个效果和普通的下划线效果有些区别，给人很新鲜的感觉，而且这个效果并不难做。

    找到CSS里text-decoration的属性表我们会发现，它里面并没有所谓的虚线属性值，只有经常用到的underline、line-through和none，那虚线效果是怎么出来的呢？

    其实它是利用text-decoration:none去掉链接的下划线，然后在链接下面添加下边框线而成的。

    比如：

  a {
    font-size: 14px;
    text-decoration:none;
    border-bottom:1px dashed #F00;
    }
    a:hover {
    border-bottom:1px solid #000;
    }