<!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. python中带下划线的变量和函数的意义

    表示私有属性,只能在自己的实例方法里面访问. self.__name会被编译成self._Bar__name以达到“不被外部访问”的效果 示例如下: 变量: 1.  前带_的变量:  标明是一个私有变 ...

  2. 移去OleContainer的黑边框

    //禁止双击打开word编辑 olecontainer1.AutoActivate := aaManual; //禁止右键菜单 olecontainer1.AutoVerbMenu := False; ...

  3. Winform 两个窗体通讯 一个窗体调用另一个窗体的方法

    主要用到 委托 和 注册事件. 功能:点击form1的按钮,改变form2的label文本

  4. hadoop无法启动常见原因

    1.Could not chdir to home directory /home/USER: Permission denied 启动datanode时会报这个错误,尝试利用ssh登录datanod ...

  5. SpringBoot application.yml logback.xml 多环境

    启动命令为 //开发环境 java -jar app.jar --spring.profiles.active=dev--server.port=8060 //测试环境 java -jar app.j ...

  6. CentOS6.5下安装ActiveMQ

    1.下载ActiveMQ [root@localhost softwares]# wget http://archive.apache.org/dist/activemq/apache-activem ...

  7. hdoj1003 DP

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  8. eclipse搭建struts2环境及所遇到的问题

    最近几天一直在搭建struts2框架,本身struts2框架的搭建是非常简单的,但不知道为什么最近就是总是报错,报了一大串的错 首先就是每次在类的根路径下创建struts.xml时,就报错,也不知道为 ...

  9. Java计算图的匹配率

    2016-07-02 大概意思就是这样了,代码里我貌似没有计算最后一步,但是原理都是一样的.....R1有5个点P1有四个点,他们共同的点是4个,那就是共同点4*4/(R1的5个点*P1的四个点就是0 ...

  10. collections系列之Counter

    collections模块中有一个叫做Counter的类,该类的作用就是计数器,Counter是对dict的加工,所有Counter继承了dict的方法 1.创建一个Counter,需要import ...