利用CSS中的content属性来获取标签元素中的某个属性值

首先必须声明一下，不知道content是什么的朋友请去翻一下CSS手册，如果不知道CSS手册是什么的朋友请无视这篇烂文，因为这篇烂文是我在网上看到有人提到说，如何利用CSS来获取某个标签中的属性值时想到的，权当博客充数的文章。

在HTML中有一个title属性相信各位页面仔同仁们应该都知道的，这个title属性呢可以让我们让在鼠标悬停在某个内容上时出现一个小黄条来显示更多的一些文本信息。以前也有很多人通过在某个标签中再嵌套一个标签，然后结合JS的方式让那个多嵌套的标签模拟title的效果（当然也是会去美化一下的）。

不会JS，手又十分欠的人，记得以前在CSS手册里看到过有一个属性可以读取标签属性值的，翻一下，搞出一个简单的丑陋的效果，木有demo，因为代码很简单，又懒得打开FTP上传，抱歉。

^?View Code XML

1

<a href="http://blog.linxz.de/">小志博客</a>

^?View Code CSS

12

a {position:relative;float:left;height:20px;font-size:12px;}a:hover:after {position:absolute;top:16px;left:0;content:attr(href);padding:2px 5px;color:#000000;border:1px solid #99CC29;background-color:#E5E5E5;border-radius:3px;box-shadow:0 1px 0 #000000;}

代码中重点的是利用:after或者:before，然后让content来读取标签内的属性值。content:attr(href)

attr(这里放标签中的那个属性，浏览器会去读取属性值的)

最后的最后，再废话一句，不是所有浏览器都支持的哈。如果要所有浏览器都支持的话，那么就是前面所提到的，多嵌套一个标签，然后结合JS来实现。