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;}

还可以使用字符串连接哦

.box:before{content:attr(data-text)"lalallala";width:100px;line-height:30px;}

下面是我写的一个小例子：

<!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 属性的更多相关文章

css3中content属性的应用
可以使用css3中content功能为html元素增减内容.content需要配合 E:before和E:after使用. 废话少说,看代码和效果说明: 第一种: css代码: #div1:befor ...
CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
CSS Content 属性
content 属性,用在after,before伪元素上,用于在选中的元素前后插入内容. 插入的内容多种多样, 纯文字 h1::after{ content:"h1后插入内容" ...
CSS3 content属性学习
css3中出现了 ":before",":after"伪类, 你可以这样写: h1:after{ content:'h1后插入的文本'; ... } 这两个选择 ...
初识 css3中counter属性
最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...
CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS魔法堂：一起玩透伪元素和Content属性
前言继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...

随机推荐

Js/Ajax中发送HttpPost请求调用WebService
1) WebService中的方法 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(Confo ...
CentOS6.X安装vsftpd服务
#-----------------CentOS6.X安装VSFTPD服务 #! /bin/sh #1.关闭selinux setenforce 0 sed -i 's/enforcing/disab ...
C# 运行时编辑节点重命名
方法一: ; bool nodeChanged = false; //右键点击,就进入修改状态 private void treeView1_NodeMouseClick(object sender, ...
wamp+zendstudio12+xDebugger环境搭建
1.网上找到Wampserver,下载即可,一路安装即可,安装好后打开浏览器输入http://localhost即可看到有没有安装成功比如我的是这样的,就说嘛wampserver安装成功了 wamp ...
获取屏幕分辨率（C/C++）
C/C++获取屏幕分辨率的方法 int main(int argc, char* argv[]) { // 需要添加头文件: // #include <Windows.h> system( ...
[leetcode]_Symmetric Tree
第二道树的题目,依旧不会做,谷歌经验. 题目解释: give you a tree , judge if it is a symmetric tree. 思路:我以为要写个中序遍历(进阶学习非递归算法 ...
火狐浏览器设置placeholder的时候记得改opacity
最近做项目的时候涉及到需要修改输入框的placeholder的字体颜色,我的CSS如下: ::-webkit-input-placeholder{ color: #c5c5c5;}::-moz-pla ...
ecshop常用语句
ecshop之中的IF语句: <select name="product_cat" id="product_cat" class="form-c ...
【转】MYISAM表批量压缩
关于对MYISAM表的压缩,可以使用myisampack和myisamchk完成(myisampack完之后必须进行myisamchk才能使用压缩后的表,而且是只读的), 其详细地用法可以参考官方文档 ...
scala构造器实战
父类 abstract class Event(val name:String) { var time:Long var content:String } 子类 private[spark] clas ...

css3 的content 属性

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

随机推荐

热门专题