再谈如何表现已点击的链接2

 

上次发表《如何表现已点击的链接》一文，很多朋友和5key讨论了这个已点击的链接是否需要去修饰，怎样去修饰。这两天花时间看了很多国内外的文章。在这里总结如下四种方式：

预览地址：http://5key.net/demo/link-visited2/

1、Line-Through属性。
这是最简单的表现已点击链接的一种方式。在:visited中加上line-through。

2、点击后显示隐藏的span
在a标签中加入一对span，默认将其隐藏，链接被点击后显示span中的内容

3、:after伪类
a:visited:after { content: ” (已点击)”; }，可惜IE不支持:after。

4、visited的背景图片
上次《如何表现已点击的链接》有详细的介绍，这里就不重复了。

下载: link-visited.html

1. <style>     
2. *{margin:0; padding:0;} 
3. body{padding:20px;} 
4. div{height:20px; padding:10px;} 
5. h1{font-size:16px; font-weight:bold; color:#000; padding:0 0 10px 0; border-bottom:1px solid #ccc;} 
6. .box1{} 
7. .box1 a{color:#333; text-decoration:none; font-size:14px;} 
8. .box1 a:visited{color:#999; text-decoration:line-through;} 
9. .box2{}  .box2 a{color:#333; text-decoration:none; font-size:14px;} 
10. .box2 a span{display:none; color:#F00;} 
11. .box2 a:visited{color:#999; } 
12. .box2 a:visited:hover{color:#F00; } 
13. .box2 a:visited span{display:inline;} 
14. .box3{} 
15. .box3 a{color:#333; text-decoration:none; font-size:14px;} 
16. .box3 a:visited:after { content: " (已点击)"; } 
17. .box3 a:visited:hover{color:#F00; }
18. </style>
19. <h1>如何表现已点击的链接</h1>
20. <p class="box1"><a href="#">已点击过的链接</a></p>
21. <p class="box2"><a href="#">已点击过的链接 <span>√</span></a></p>
22.  
23. <p class="box3"><!--IE不支持-->
24. <a href="#">已点击过的链接 </a><span style="font-size: 12px; color: #f00">IE不支持</span>