上次发表《如何表现已点击的链接》一文,很多朋友和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的背景图片
上次《如何表现已点击的链接》有详细的介绍,这里就不重复了。
- <style>
- *{margin:0; padding:0;}
- body{padding:20px;}
- div{height:20px; padding:10px;}
- h1{font-size:16px; font-weight:bold; color:#000; padding:0 0 10px 0; border-bottom:1px solid #ccc;}
- .box1{}
- .box1 a{color:#333; text-decoration:none; font-size:14px;}
- .box1 a:visited{color:#999; text-decoration:line-through;}
- .box2{} .box2 a{color:#333; text-decoration:none; font-size:14px;}
- .box2 a span{display:none; color:#F00;}
- .box2 a:visited{color:#999; }
- .box2 a:visited:hover{color:#F00; }
- .box2 a:visited span{display:inline;}
- .box3{}
- .box3 a{color:#333; text-decoration:none; font-size:14px;}
- .box3 a:visited:after { content: " (已点击)"; }
- .box3 a:visited:hover{color:#F00; }
- </style>
- <h1>如何表现已点击的链接</h1>
- <p class="box1"><a href="#">已点击过的链接</a></p>
- <p class="box2"><a href="#">已点击过的链接 <span>√</span></a></p>
- <p class="box3"><!--IE不支持-->
- <a href="#">已点击过的链接 </a><span style="font-size: 12px; color: #f00">IE不支持</span>