<!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的小例子的更多相关文章

  1. css display table使用小例子实验

    display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...

  2. 前端小例子 基础js css html练习

    前情提要: 学前端也有一阵了,个人感觉前端还是重要的. html 学习教程 https://www.cnblogs.com/baili-luoyun/p/10466040.html css 教程 js ...

  3. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  4. [译]CSS content

    原文地址:http://css-tricks.com/css-content/ CSS中有一个属性content,只能和伪元素:before和:after一起使用,他们的写法像伪类选择器(前面有冒号) ...

  5. Struts2 小例子 --第二弹

    struts-2.5.14.1-all.zip  下载后文件夹说明 apps:war格式的例子文件 lib:引用jar包文件 src:源码文件 docs:帮助文档 小例子: 1.创建web工程:str ...

  6. java即时通信小例子

    学习java一段时间了,今天写来一个即时通信的小例子练手在其过程中也学到了一些知识拿出来和大家分享,请路过的各位大神多多赐教... 好了下面讲一下基本的思路: 首先,编写服务器端的程序,简单点说吧就是 ...

  7. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  8. CSS content内容生成技术以及应用

    content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...

  9. CSS content内容生成技术以及应用（转）

    一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...

  10. text-align:justify小例子

    一个使用 text-align: justify; 使元素均匀分布的小例子: <!DOCTYPE html> <html lang="en"> <he ...

随机推荐

  1. Haskell语言学习笔记（32）Data.Maybe, Data.Either

    Data.Maybe Prelude Data.Maybe> maybe "" show (Just 5) "5" Prelude Data.Maybe& ...

  2. Process子类

    创建新的进程还能够使用类的方式,可以自定义一个类,继承Process类,每次实例化这个类的时候,就等同于实例化一个进程对象,请看下面的实例: from multiprocessing import P ...

  3. Haddop SHUTDOWN_MSG: Shutting down NameNode at java.net.UnknownHostException: process01: process01: unknown error

    SHUTDOWN_MSG: Shutting down NameNode at java.net.UnknownHostException: process01: process01: unknown ...

  4. win10关闭后台应用程序进程的方法

    一)win10系统后台应用有两大特点: 1.win10系统有许多系统自带应用软件,在系统任务栏中看不到任何自带的应用程序运行 2.但通过任务管理器的进程中,可直观的看到许多非系统进程正在运行. 二)后 ...

  5. Android使用HTTPS进行IP直连握手失败问题(okHttp)

    为什么要使用ip直连这种方式去请求我们的服务器呢?这其实和国内运营伤有关,运营商有时为了利益会将你的域名劫持换成他人的域名,为了防止这种情况的发生通用的解决办法要么联系运营商要么就只能使用ip直连了. ...

  6. 关于easyui-datagrid数据表格, 分页取出数据

    在制作数据表格的时候有一个这样的属性, pagination是否显示分页列表, 分页显示的时候需要分别从数据库中取数据, 每页显示几行, 即只从数据库取出几行数据来显示, 具体代码如下 1, 显示页面 ...

  7. Island Transport

    Island Transport http://acm.hdu.edu.cn/showproblem.php?pid=4280 Time Limit: 20000/10000 MS (Java/Oth ...

  8. python之递归锁【Rlock】

    # 递归锁:就是一把锁中还有一把小锁,比如学校的大门口有一个大锁,学校里的 #每个教室也有一把小锁,以后所有的锁都用rlock就可以了,不要用lock,尤其是多层锁的时候,必须要用递归锁 import ...

  9. iOS - push 或 pop或点击导航栏返回pop指定导航控制器

    以前一直有个很疑惑的问题没有搞清楚 关于ios中 viewcontroller的跳转问题,其中有一种方式是采用navigationController pushViewController 的方法,比 ...

  10. IIS 设置404页面 显示系统找不到指定的文件

    1.原因就是IIS的普通用户没有访问404页面的权限,造成了自定义404页面无法显示.只需要将user用户组具有读的权限即可.