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:;left:;font-size:12px;transition:all .3s linear;}

.above-window:before{content:attr(data-text);position:absolute;width:%;height:20px;line-height:40px;top:;left:;text-align:center;overflow:hidden;background:#f1f1f1;font-size:16px;transition:all .3s linear;}

.above-window:after{content:attr(data-text);position:absolute;width:%;height:20px;line-height:1px;top:19px;left:;text-align:center;overflow:hidden;background:#f1f1f1;font-size:16px;transition:all .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>

css3 的content 属性的更多相关文章

  1. css3中content属性的应用

    可以使用css3中content功能为html元素增减内容.content需要配合 E:before和E:after使用. 废话少说,看代码和效果说明: 第一种: css代码: #div1:befor ...

  2. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  3. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  4. CSS Content 属性

    content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...

  5. CSS3 content属性学习

    css3中出现了 ":before",":after"伪类, 你可以这样写: h1:after{ content:'h1后插入的文本'; ... } 这两个选择 ...

  6. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  7. CSS3新增文本属性实现图片点击切换效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS魔法堂：一起玩透伪元素和Content属性

    前言  继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...

  9. 半深入理解CSS3 object-position/object-fit属性

    半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

随机推荐

  1. Mysql授权GRANT ALL PRIVILEGES

    1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost.这个时候只要在localhost的那台电脑,登入mysql后,更改 "mysql" 数据库里的 " ...

  2. C++排列对称串

    题目内容:字符串有些是对称的,有些是不对称的,请将那些对称的字符串按从小到大的顺序输出.字符串先以长度论大小,如果长度相同,再以ASCII码值为排序标准. 输入描述:输入数据中含有一些字符串(1< ...

  3. ASP.NET MVC5学习笔记之Action参数模型绑定之模型元数据和元数据提供

    一. 元数据描述类型ModelMetadata 模型元数据是对Model的描述信息,在ASP.NET MVC框架中有非常重要的作用,在模型绑定,模型验证,模型呈现等许多地方都有它的身影.描述Model ...

  4. linux安装至少有哪两个分区，各自作用是什么？

    1.至少有/代表根分区,/swap代表的意思是交换分区. 2.swap相当于缓存的作用:

  5. SQL Server 基础之《学生表-教师表-课程表-选课表》

    一.数据库表结构及数据 建表 CREATE TABLE Student ( S# INT, Sname ), Sage INT, Ssex ) ) CREATE TABLE Course ( C# I ...

  6. SIMATIC PCS 7 结构图

  7. IT新人论成长

    说自己是新人,其实自己也不新了,2012年毕业,辗转3个城市,现在在上海一家公司,工资不到5K. 在来现在公司之前,我从事web后台开发,采用MVC模式,虽然做了不少的网站,但感觉自己的水平还是在底层 ...

  8. SPARK 数据统计程序性能优化。

    昨天写完R脚本 没测试就发到博客里, 结果实际运行发现很慢,运行时间在2小时以上, 查看spark控制台, 大量时间消耗在count上, 产生的stage多大70多个 . 分析原因. 1  selec ...

  9. Java当中的I/O的字符流

    字符流读写文件时,以字符为基础 I/O当中字符流的核心类 Reader类和Writer类是所有字符流类的父类,同样也是抽象类.FileReader和FileWriter分别是它们的子类. 核心类的核心 ...

  10. oh-my-zsh配置你的zsh提高shell逼格终极选择

    抱歉,这篇博文推迟发布了,人都是有惰性的...看在这个牛逼闪闪的标题就原谅我吧! 为何这篇文章要归类到 mac 下? 第一个问题,稍后我们说明下. zsh是个什么东东? 第二个问题... 你应该稍微接 ...