几个CSS-content的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo1{
position: relative;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
overflow: hidden;
}
.demo1:before{
content: '我是';
}
.demo1:after{
content: '';
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 100%;
transition: top .3s linear;
background: rgba(0,0,0,.3);
}
.demo1:hover:after{
top: 0;
transition: top .3s linear;
} .demo2:before{
content: url('../images/gg.png');
} .demo3:after{
content: '_'attr(data-content)':'attr(class);
} .demo4 p{
counter-increment: mycount 1;
}
.demo4 p:before{
content:'第'counter(mycount)'章 ';
}
</style>
</head>
<body>
<h1>CSS-content应用</h1>
<article>
<header>
<h2>content:''</h2>
</header>
<div class="demo1">content on here</div>
</article>
<article>
<header>
<h2>content:url('')</h2>
</header>
<div class="demo2">url属性加载图片</div>
</article>
<article>
<header>
<h2>content:attr()</h2>
</header>
<div class="demo3" data-content="我是">attr属性可以调用当前的属性值</div>
</article>
<article>
<header>
<h2>content:counter</h2>
</header>
<div class="demo4">
<p>主题</p>
<p>主题</p>
<p>主题</p>
<p>主题</p>
</div>
</article>
</body>
</html>
效果如下：
几个CSS-content的小例子的更多相关文章
- css display table使用小例子实验
display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...
- 前端小例子 基础js css html练习
前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...
- 【zTree】 zTree使用的 小例子
使用zTree树不是第一次了 但是 还是翻阅着之前做的 对照着 使用起来比较方便 这里就把小例子列出来 总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先 在 ...
- [译]CSS content
原文地址:http://css-tricks.com/css-content/ CSS中有一个属性content,只能和伪元素:before和:after一起使用,他们的写法像伪类选择器(前面有冒号) ...
- Struts2 小例子 --第二弹
struts-2.5.14.1-all.zip 下载后文件夹说明 apps:war格式的例子文件 lib:引用jar包文件 src:源码文件 docs:帮助文档 小例子: 1.创建web工程:str ...
- java即时通信小例子
学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...
- bootstrap 模态 modal 小例子
bootstrap 模态 modal 小例子 <html> <head> <meta charset="utf-8" /> <title ...
- CSS content内容生成技术以及应用
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...
- CSS content内容生成技术以及应用（转）
一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...
- text-align:justify小例子
一个使用 text-align: justify; 使元素均匀分布的小例子: <!DOCTYPE html> <html lang="en"> <he ...
随机推荐
- LVS的DR模式
DR模式: 请求由LVS接受,由真实提供服务的服务器(RealServer, RS)直接返回给用户,返回的时候不经过LVS. DR模式下需要LVS和绑定同一个VIP(RS通过将VIP绑定在loopba ...
- Hibernate的一个问题object references an unsaved transient instance - save the transi5
1 我做了一对多和多对一的双向关联关系,在User这一方@ManyToOne已经设置了级联Cascade,这样在测试程序中保存User时,Group也应该自动保存,为什么会抛出以下的异常: (我是按着 ...
- 疯狂java——第一章 java语言概述与开发环境
J2ME: 主要用于控制移动设备和信息家电等有限存储的设备. J2SE: 整个java技术的核心和基础,它是J2ME和J2EE编程的基础. J2EE: Java技术中应用最广泛的部分,J2EE提供了企 ...
- Python3 ssl模块不可用的问题
编译安装完Python3之后,使用pip来安装python库,发现了如下报错: $ pip install numpy pip is configured with locations that re ...
- Typora快捷键的使用
无序列表:输入-之后输入空格 有序列表:输入数字+“.”之后输入空格 任务列表:-[空格]空格 文字 标题:ctrl+数字 表格:ctrl+t 生成目录:[TOC]按回车 选中一整行:ctrl+l 选 ...
- switch_to_frame，切换frame框架
页面包含frame/iframe标签,需要先切换到该frame标签,再去定位属于这个frame的元素. 如果要再去定位其他frame的元素,需要回到该frame的上级,定位到要选择的frame,不 ...
- Web标准：六、html列表
Web标准:六.html列表 知识点: 1.ul无序和ol有序列表 2.改变项目符号样式或用图片定义项目符号 3.横向图文列表 4.浮动后父容器高度自适应 5.IE6的双倍边距bug 1)ul无序 ...
- 使用JSON.parse()转化成json对象需要注意的地方
http://blog.csdn.net/u011277123/article/details/53055479 有三种方法: var str = '{"name":"小 ...
- C++的编译与连接
编译器的任务是把我们人类通常能够读懂的文本形式的 C 语言文件转化成计算机能明白的目标文件.1. 预编译生成的仍然是.c文件1)把"include"的文件拷贝到要编译的源文件中. ...
- 关于Python的OSError和IOError
参考:http://stackoverflow.com/questions/29347790/difference-between-ioerror-and-oserror 在3.x版本已经移除,剩下O ...