对a标签应用样式

其实可以对a标签应用自定义样式。

思路：

1.去掉默认的下划线样式。

2.给元素加新的样式，包括提示，默认状态，选中状态

3.默认状态点状下划线，提示隐藏，选中后下划线变实线，提示显示。

<style>
a{ position: relative; text-decoration: none; border-bottom: 1px dotted #ccc; padding-bottom: 5px; }
a em{ display: none; position: absolute; padding: 5px; border: 1px solid #ccc; left: 20px; top: 30px; width: 60px; }
a:hover{border-bottom: 1px solid #ccc;}
a:hover em{ display: block; }
</style>
<a href="http://snowinmay.net/">我是哒哒<em>大家好我是哒哒</em></a>

DEMO　

 

 

转载于:https://www.cnblogs.com/snowinmay/archive/2013/04/29/3051396.html