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. freefilesync 7 使用

    官方下载地址:http://www.freefilesync.org/download.php 1.打开FreeFileSync 设置左右的文件夹,设置过滤规则,设置同步方式(双向.单向),执行同步 ...

  2. MYSQL的存储引擎一般只要哪些？

    根据个人个人见解: MySQL的存储引擎(构成.安全.锁) Myisam:数据操作快速的一种引擎,支持全文检索.文件保存在数据库名称为目录名的 目录中,有3个文件,分别是表定义文件(.frm).数据文 ...

  3. WordPress 非插件实现拦截无中文留言

    Some Chinese Please 插件可以拦截不带中文字的留言,之前本博客一直在用效果不错,不写入数据库,可有效地减少 spam 对服务器的无谓使用,其实可以将插件简化一下,直接用代码实现.将下 ...

  4. PHP错误处理

    错误的分类: 1.语法错误     2.运行时错误 3.逻辑错误 调试方法:1.注释法 2.输出法 error_reporting(E_ALL & ~E_NOTICE & ~E_WAR ...

  5. 小课堂week13 Clean Code Part2

    Clean Code Part2 对象与数据结构 首先让我们进行一个严肃的思考,对象与数据结构的区别在哪里? 如下两段代码分别用数据结构和对象的方法来描述了一个Point. public class ...

  6. 【原创】小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载五（给按钮加图标）

    在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事.下面截取范例5-4中导航栏部分的代码: <divdata-role="foote ...

  7. Python-Day12 Python mysql and ORM

    一.Mysql数据库 1.什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,    每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据 ...

  8. ThinkPHP3.2.2中开启REWRITE模式

    1. 在项目配置文件(\Application\Common\Conf\config.php)中配置URL模式 <?php return array( //URL模式 , ); 2. 在Thin ...

  9. Percona-Xtrabackup 2.3.3 慢查询依旧堵塞MariaDB备份（三）

    MariaDB [yoon]> select version();+---------------------+| version() |+---------------------+| 10. ...

  10. DrawerLayout带有侧滑功能的布局类（2）

    ActionBarDrawerToggle: 在前一张中我们并没有使用drawLayout.setDrawerListener(); 对应的参数对象就是DrawerLayout.DrawerListe ...