几个CSS-content的小例子
2024-09-27 16:22:24
<!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>
效果如下:
最新文章
- sizzle分析记录:关于querySelectorAll兼容问题
- 【Alpha版本】冲刺随笔汇总
- 浏览器桌面通知--Notification
- SDRAM和dcfifo的联合
- Fragment学习笔记
- $.browser.msie 报错 null
- 网上下载的“上下3D”和“左右3D”影片该如何播放?
- Android-Service组件
- Django REST Framework API Guide 07
- 关于IDE的选择
- [Spark][Hive][Python][SQL]Spark 读取Hive表的小例子
- P1948 [USACO08JAN]电话线Telephone Lines(二分答案+最短路)
- (转)C#连接OleDBConnection数据库的操作
- java poi处理excel多sheet并实现排序
- golang语言中os包的学习与使用(文件,目录,进程的操作)
- VIP之Clipper
- css小贴士备忘录
- Halcon小函数的封装和代码导出
- Junit的常见注解
- zabbix 表结构详情(基本)
热门文章
- Virtualbox [The headers for the current running kernel were not found] (操作过程后还是失败,显示相同问题)
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 代码分层
- 迷你MVVM框架 avalonjs 1.3.6发布
- 关于sql 增删改
- SQL数据库简单的建立与操作
- 新手C#SQLServer在程序里实现语句的学习2018.08.12
- LinuxI/O 性能分析
- Eletron 打开文件夹,截图
- javascritp伪协议
- Appium客户端,命令行启动server