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. zabbix2.4 安装配置

    首先从www.zabbix.com下载rpm包: 接下来我要配置一台zabbix server,自己监控自己即使服务端又是客户端,zabbix web gui和zabbix数据库都放在同一台主机上,除 ...

  2. 短信接口调用以及ajax发送短信接口实现以及前端样式

    我们短信api用的是云信使平台提供的非免费短信服务:官网提供的demo有两种,分别是function加其调用.class文件加其调用. 在这里我们用class文件加调用: 首先,ThinkPHP里面自 ...

  3. python网页请求urllib2模块简单封装代码

    这篇文章主要分享一个python网页请求模块urllib2模块的简单封装代码. 原文转自:http://www.jbxue.com/article/16585.html 对python网页请求模块ur ...

  4. Pull解析xml

    没有写抛出的异常,例子是含有多个Person对象persons.xml(此片内容未写写入的代码),包含id,name,email,address标签,Person对象含有id,name,email,a ...

  5. c# float和double的“坑”

    定义一个float类型的变量=0.7,结果在IL中却是0.69999999. 乘以10之后,获取整数值.得到的却是6.通过查看IL,竟然被转换成double类型再转换.就变成6了. Demo: IL: ...

  6. android JSON 技术

    json 语法检查和在线解析网址:http://json.parser.online.fr/ limengwe android Json解析详解(详细代码) http://blog.csdn.net/ ...

  7. 20.python的文件处理

    我们日常在处理文件的时候一般都遵循这样的逻辑:打开文件,操作文件,保存关闭文件. 但在python中,又分为以下几步:创建文件对象,对文件对象进行操作(读入,写入之类的),关闭文件. 由于文件操作在p ...

  8. Ruby实现wordCounter

    做解密发现的: m={} File.open("test1.txt") do |f| f.each_line do |line| line.chomp! #去除每行结尾的回车(\n ...

  9. [Prism框架实用分享]如何在主程序中合理的弹出子窗体

    大家好 说起子窗体,大家都会想到ChildWindow,多熟悉的一个控件.不错,Sliverlight中已经提供了子窗体的具体实现,而在WPF中却没有这么好的事情(有的第三方控件商已经提供此控件).最 ...

  10. [转]关于VC预定义常量_WIN32，WIN32，_WIN64

      VC2012 下写 Windows 程序时,有时需要判断编译环境.在之前的文章<判断程序是否运行在 Windows x64 系统下.>里说过如何在运行期间判断系统环境,但在编译时如何判 ...