<!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. Axure8 实现移动端页面上下滑动效果

    目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的, ...

  2. ResponseUtil数据传递至前端

    package com.java1234.util; import java.io.OutputStream; import java.io.PrintWriter; import javax.ser ...

  3. Python线程优先级队列（Queue）

    Python的Queue模块中提供了同步的.线程安全的队列类,包括FIFO(先入先出)队列Queue,LIFO(后入先出)队列 LifoQueue,和优先级队列PriorityQueue.这些队列都实 ...

  4. 简单AOP

    代码如下 //使用说明 //1,新加接口与类 //2,新加类并实现ICallHandler类: ExecuteHandler //3,新建特性并实现HandlerAttribute和重写其中的Crea ...

  5. js中函数的使用方式及回调函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JAVA数据类型（转载）

    JAVA中值类型的只有short,char,byte,int,long,double,float,boolean八大基本类型,其他的所有类型都是引用类型. 首先我们都知道在编程中赋值运算“=”的意思是 ...

  7. proc

    1. /proc 下文件的内容是动态创建的,当文件可写时可用作控制和配置目的. 2. 在某个进程读取 /proc 文件时,内核会分配一个内存页,驱动程序通过这个内存页将数据返回到用户空间 (read( ...

  8. 安装RabbitMq-----windows

    在官网download我们所需要的版本,安装rabbitMq需要erlang支持 rabbitMq :http://www.rabbitmq.com/download.html erlang  :ht ...

  9. vue 实例生命周期

    compile template into render function 编译模板渲染方法 compile el’s ouoterHtml as template 将el的outerHTML当做模板 ...

  10. 岛屿的个数12 · Number of Islands 12

    ［抄题］: ［思维问题］: ［一句话思路］: ［输入量］:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况(不合法不合理的输入): ［画图］: ［一刷］: ［二刷］: ［三刷］: ［四刷］ ...