几个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 ...
随机推荐
- FP-growth算法高效发现频繁项集（Python代码）
FP-growth算法高效发现频繁项集(Python代码) http://blog.csdn.net/leo_xu06/article/details/51332428
- kubeadmin 部署(centos 7)
安装指定版本docker:# yum list docker-ce --showduplicates | sort -ryum install docker-ce-18.06.1.ce-3.el7vi ...
- linux替换字符串的几种方法
1. 基本替换:s/str1/str2/ 替换当前行第一个str1为str2:s/str1/str2/g 替换当前行所有str1为str2:n,$s/str1/str2/ 替换第 n 行开始到最后一行 ...
- 无插件，无com组件，利用EXCEL、WORD模板做数据导出（一）
本次随笔主要讲述着工作中是如何解决数据导出的,对于数据导出到excel在日常工作中大家还是比较常用的,那导出到word呢,改如何处理呢,简单的页面导出问题应该不大,但是如果是标准的公文导出呢,要保证其 ...
- Web标准：四、纵向导航菜单及二级弹出菜单
Web标准:四.纵向导航菜单及二级弹出菜单 知识点: 1.纵向列表 2.标签的默认样式 3.css派生选择器 4.css选择器的分组 5.纵向二级列表 6.相对定位和绝对定位 1)纵向列表 可以看 ...
- svn搭建相关
转载至:http://blog.163.com/longsu2010@yeah/blog/static/173612348201202114212933/ 安装步骤如下: 1.yum install ...
- cdoj203-Islands 【并查集】
http://acm.uestc.edu.cn/#/problem/show/203 Islands Time Limit: 30000/10000MS (Java/Others) Memor ...
- inner join和outer join
内连接 只连接匹配的行 左外连接 包含左边表的全部行(不管右边的表中是否存在与它们匹配的行),以及右边表中全部匹配的行 A left join B等价于A left ...
- 配置Maven从私服下载构件
--------------------siwuxie095 配置 Maven 从私服下载构件 从 Nexus ...
- UVa 230 Borrowers(map和set)
I mean your borrowers of books - those mutilators of collections, spoilers of the symmetry of shelve ...