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. HTML新特性之一----canvas

    <canvas id="me"></canvas>//申请一个canvas标签    <script>                var c ...

  2. static local variable

    Putting the keyword static in front of a local variable declaration creates a special type of variab ...

  3. freefilesync 7 使用

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

  4. js如何将纯数字字符串转换为long型

    1.js如何将纯数字字符串转换为long型? js 中 int的存储位数?最大十进制数表示是多少? 精度http://www.jb51.net/article/59808.htm 整数(不使用小数点或 ...

  5. mariadb的explain分析及InnoDB存储引擎

    id: 当前查询语句中,每个SELECT语句的编号,     id: 1  表示简单类型的查询 复杂类型的查询有三种:简单子查询,用于FROM中的子查询,联合查询:UNION 注意:UNION查询的分 ...

  6. 通过URLHttpConnection方式来取得图片，并且显示在ImageView上

    界面: 代码xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  7. Windos中无法删除桌面IE图标的解决方法

    解决方法其实并不难,打开注册表,转到如下图的位置,详细地址在图片最下面: 需要注意的是,你需要在NameSpace中逐个查看各个项目的数据值,显示为数据值为Internet Explorer的项目即为 ...

  8. xmpp push篇一 广播消息

    ---广播给所有人--- 1. 登录xmpp admin 账户 2. sendpacket <message to="pandans.com(域名)" > <bo ...

  9. 【Windows】如何判断当前鼠标是否按下左键或右键

    在delphi中,很多窗体和控件的鼠标事件里面已经将鼠标按键状态封装好传给响应事件的函数,所以这种情况直接使用就可以,但在某些时候,我们没有这些事件可以处理时,想判断鼠标按键是否按下的状态,就需要借助 ...

  10. 18.python的异常处理

    python中至少包括两种错误:语法错误(syntax errors)和异常(exceptions). 1.语法错误   语法错误,也被称作解析错误