几个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 ...
随机推荐
- Nginx打开目录浏览功能(autoindex)以及常见问题解决方案
Nginx默认是不允许列出整个目录的.如需此功能,打开nginx.conf文件,在location server 或 http段中加入autoindex on;另外两个参数最好也加上去: autoin ...
- (3)shiro自定义realm
上面一章说到shiro的认证和授权最底层就是调用realm的getAuthorizationInfo(获取用户的角色和资源)和getAuthenticationInfo(校验账号密码是否正确)两个方法 ...
- Javascript系列：总体理解
js是一个脚本客户端(浏览器)语言.和sql html类似.多练习. 没有排错的经验,弱类型语言,浏览器解释执行,出错也不会报错 预备 <!DOCTYPE html PUBLIC "- ...
- How to read very large text files fast
Question Does anyone know the fastest way to read large text files (10Mb) into a string.Readln is ju ...
- 实现溢出文本eclipsis的解决
实现溢出文本eclipsis的解决:overflow:hidden;text-overflow:ellipsis; white-space:nowrap; 如:<a href="&qu ...
- struts2 参数注入 方法拦截器
web.xml: <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi=" ...
- 部分2020年交期的PR回写到SAP中
描述:此问题一直存在,只是用户没有发现,最近提出,部分2020年交期的PR回写到SAP中 优化: SELECT MAX (PR.ORDERID), PR.ITEM, SUBSTR (PR.RECOMM ...
- richface的配置、用法介绍和注意事项
richface的配置.用法介绍和注意事项一.RichFaces (3.1.x) 技术需求 1.JDK 1.5 或更高版本: 2.支持的 JSF 实现: Sun JSF 1.1 RI - 1.2 My ...
- BeanDefinitionStoreException: IOException parsing XML document from ServletContext resource
Tomcat报错如下: BeanDefinitionStoreException: IOException parsing XML document from ServletContext resou ...
- [leetcode]543. Diameter of Binary Tree二叉树直径
Given a binary tree, you need to compute the length of the diameter of the tree. The diameter of a b ...