几个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 ...
随机推荐
- box2d 易错
1.动态刚体与一个与静态刚体重叠的小的感应刚体在contactBegin时,有些时候无法侦测到 2.bodyA.GetContactList()应用非动态刚体,会找不到另一非动态刚体的接触,非动态刚体 ...
- 注册COM
可以用代码在程序中实现COM的注册. 举例如下: (假设需要注册的文件为test.ocx)uses OLEctl,....varOCXHand: THandle;RegFunc: TDllRegist ...
- python 刷题必备
1.判断输入的数字是否是回文数: 学习内容:把数字转成字符串 1. def is_palindrome(n): n=str(n) m=n[::-1] return n==m 2. tmp_str = ...
- twitter 等网站console.log不能使用，可用alert或者
function setConsole() { var iframe = document.createElement('iframe'); iframe.style.display = 'none' ...
- Java工具类_表结构自动生成对应的实体类、Mapper.xml文件、Dao类
import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWrit ...
- sharepoint 调查问卷权限设置
参考网址:http://www.cnblogs.com/mybi/archive/2011/04/18/2019935.html 按文章设置后发现访问时提示没有权限. 于是把新权限(问卷回复)的权限组 ...
- 第八章 高级搜索树 (xa1)红黑树：动机
- 微信小程序及开发工具介绍
http://mp.weixin.qq.com/wiki 这里下载开发者工具
- JAVA 系统变量之System.getenv()和System.getProperty() 用法
Java提供了System类的静态方法getenv()和getProperty()用于返回系统相关的变量与属性,getenv方法返回的变量大多于系统相关,getProperty方法返回的变量大多与ja ...
- 无法打开登录所请求的数据库 "****"。登录失败
错误:无法打开登录所请求的数据库 "****".登录失败.用户 '****' 登录失败. sql2005连接时出现的错误 解决方法:权限不够,给登录名授权,赋予管理员角色,在登录名 ...