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>

 

posted @ 2016-01-09 18:49  幽竹小妖  阅读(1956)  评论(0)  编辑  收藏  举报