css3 的content 属性
content属性想必大家都熟悉了，一般结合伪类一起使用，表示显示的内容
例如：.box:before{content:"hello";width:100px;line-height:30px;}
这种的是静态内容
css3 里面的content 可以使用动态内容结合html5的自定义属性
格式：content:attr(data-text) data-text不可以加引号哦^_^
例如：
.box:before{content:attr(data-text);width:100px;line-height:30px;}
<div class="box" data-text="你好">啦啦啦啦</div>
还可以使用字符串连接哦
.box:before{content:attr(data-text)"lalallala";width:100px;line-height:30px;}
<div class="box" data-text="你好">啦啦啦啦</div>
下面是我写的一个小例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .above-window-wrap{position:relative;width:202px;height:42px;margin:50px;overflow:hidden;} .above-window{width:200px;height:40px;line-height:40px;background:#f1f1f1;font-family:"microsoft yahei";text-align:center;border:1px solid #efefef;position:absolute;top:0;left:0;font-size:12px;transition:all 0.3s linear;} .above-window:before{content:attr(data-text);position:absolute;width:100%;height:20px;line-height:40px;top:0;left:0;text-align:center;overflow:hidden;background:#f1f1f1;font-size:16px;transition:all 0.3s linear;} .above-window:after{content:attr(data-text);position:absolute;width:100%;height:20px;line-height:1px;top:19px;left:0;text-align:center;overflow:hidden;background:#f1f1f1;font-size:16px;transition:all 0.3s linear;} .above-window:hover{font-size:16px;} .above-window:hover:before{top:-24px;} .above-window:hover:after{top:44px;} </style> </head> <body> <div class="above-window-wrap"> <div class="above-window" data-text="Hover Me">Hover Me</div> </div> <!-- 知识点 伪类 和 动态content 参考网址 http://www.w3cfuns.com/notes/18383/8226916928ab8696aa843c14a330bf82 http://html5.9tech.cn/news/2013/1115/38641.html --> </body> </html>
