before和after的操作
before和after，前者是在元素之前插入东西，后者是在元素后面插入东西，但插入的东西不仅仅只是文字而已，还有图标，以及计算器的操作。
由于两者的操作基本一样，这里以before为例
插入文字
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
p:nth-child(1)::before{
content: '插入文字'
}
p:nth-child(2)::before{
content: '插入❤'
}
p:nth-child(3)::before{
/*改变插入文字的颜色和背景*/
content: '插入文字';
background: skyblue;
color: #fff;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
</html>
插入图片
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: url('./菜单.svg'); /*图片地址*/
}
</style>
</head>
<body>
<p>段落1</p>
</body>
</html>
计数器
纯数字
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
/*
这里的add，可以是任意变量，但标签的counter-increment属性值要和上面的一样。
*/
h2::before{
content: counter(add);
}
h2{
counter-increment: add;
}
</style>
</head>
<body>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
</body>
</html>
拼接文本
计数器也可以拼接文本，不过不用什么加号之类
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: '第'counter(add)'章';
}
h2{
counter-increment: add;
}
</style>
</head>
<body>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
</body>
</html>
指定项目编号
content: counter(计数器名, 编号种类)
upper-alpha 大写字母
upper-roman 大写罗马字母
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add, upper-roman)'. ';
}
h2{
counter-increment: add;
}
</style>
</head>
<body>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
<h2>标题</h2>
</body>
</html>
编号嵌套
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add)'. ';
}
h2{
counter-increment: add;
counter-reset: addd; /*让子标题重新编号*/
}
h3::before{
content: counter(addd)'. ';
}
h3{
counter-increment: addd;
}
</style>
</head>
<body>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
</body>
</html>
在编号与编号加横线
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add)'. ';
}
h2{
counter-increment: add;
counter-reset: addd; /*让子标题重新编号*/
}
h3::before{
content: counter(add) '-' counter(addd)'. ';
}
h3{
counter-increment: addd;
padding-left: 40px;
}
</style>
</head>
<body>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h2>标题</h2>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
<h3>子标题</h3>
</body>
</html>
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: counter(add)'. ';
}
h2{
counter-increment: add;
counter-reset: addd; /*让子标题重新编号*/
}
h3::before{
content: counter(add) '-' counter(addd)'. ';
}
h3{
counter-increment: addd;
counter-reset: adddd;
padding-left: 40px;
}
h4::before{
content: counter(add) '-' counter(addd) '-' counter(adddd) '. ';
}
h4{
counter-increment: adddd;
padding-left: 40px;
}
</style>
</head>
<body>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
<h2>标题</h2>
<h3>子标题</h3>
<h4>子标题的子标题</h4>
<h4>子标题的子标题</h4>
</body>
</html>
在字符串两边添加嵌套文字符号
首先content有两个属性值，open-quote和close-quote，可以在文字两边添加如括号，单引号，双引号之类的文字符号。
open-quote是开始的符号，close-quote是结束符号，元素的样子中使用quotes属性来决定要什么符号。
不使用quotes属性时，默认是使用双引号
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before{
content: open-quote;
}
h2::after{
content: close-quote;
}
</style>
</head>
<body>
<h2>标题2</h2>
</body>
</html>
使用别的符号
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
h2::before, h3::before{
content: open-quote;
}
h2::after, h3::after{
content: close-quote;
}
h2{
quotes: "("")"
}
h3{
/*转义字符*/
quotes: "\\""\\"
}
</style>
</head>
<body>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
</html>
before和after的操作的更多相关文章
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- Sql Server系列：分区表操作
1. 分区表简介 分区表在逻辑上是一个表,而物理上是多个表.从用户角度来看,分区表和普通表是一样的.使用分区表的主要目的是为改善大型表以及具有多个访问模式的表的可伸缩性和可管理性. 分区表是把数据按设 ...
- C# ini文件操作【源码下载】
介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）
前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...
- 如何在高并发环境下设计出无锁的数据库操作（Java版本）
一个在线2k的游戏,每秒钟并发都吓死人.传统的hibernate直接插库基本上是不可行的.我就一步步推导出一个无锁的数据库操作. 1. 并发中如何无锁. 一个很简单的思路,把并发转化成为单线程.Jav ...
- 【翻译】MongoDB指南/CRUD操作（四）
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...
- 【翻译】MongoDB指南/CRUD操作（三）
[原文地址]https://docs.mongodb.com/manual/ CRUD操作(三) 主要内容: 原子性和事务(Atomicity and Transactions),读隔离.一致性和新近 ...
- 【翻译】MongoDB指南/CRUD操作（二）
[原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(二) 主要内容: 更新文档,删除文档,批量写操作,SQL与MongoDB映射图,读隔离(读关 ...
随机推荐
- Java实现AES加密解密
之前常用两种加密算法:Base64和Md5,前者容易破解,后者不可逆. AES采用对称加密方式,破解难度非常大,在可逆的基础上,能很好的保证数据的安全性. 这里介绍Java中实现AES加密算法的加密与 ...
- Redis集群同步问题
之前被面试官问到:Redis集群中主从数据同步是从库异步读取主库,那么Redis集群其他主与主之间的数据是怎么共享的呢?或者说是怎么同步的? emmmm……当时我就懵逼了,这不是考试范围啊卧槽~只能老 ...
- scss--函数 (Functions)--unitless
(Sass::Script::Value::Bool) unitless($number) Returns whether a number has units. Examples: unitless ...
- CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...
- 基于ManagedDataAccess开发的OracleDBHelpe工具集伸手党的福音
在使用前先加入ManagedDataAccessDLL文件方可使用 添加方法:右键项目.点击管理NuGet程序包,点击浏览,在输入框内输入ManagedDataAccess,再点击安装即可 Oracl ...
- 英语口语考试资料Volunteers
Being a volunteer is great! There are lots of volunteers around us now. And they don’t do it ...
- ThinkPHP 实现数据库事务回滚示例代码
ThinkPHP提供了数据库的事务支持,如果要在应用逻辑中使用事务,可以参考下面的方法: 启动事务: $User->startTrans(); 提交事务: $User->commit( ...
- DBCP2的使用例子和源码详解（不包括JNDI和JTA支持的使用）
目录 简介 使用例子 需求 工程环境 主要步骤 创建项目 引入依赖 编写jdbc.prperties 获取连接池和获取连接 编写测试类 配置文件详解 数据库连接参数 连接池数据基本参数 连接检查参数 ...
- Netty学习——服务器端代码和客户端代码 原理详解
服务器端代码和客户端代码 原理详解:(用到的API) 0.Socket 连接服务器端的套接字 1.TcompactProtocol 协议层2.TFrameTransport 传输层3.THsh ...
- 【10分钟学Spring】：@Profile、@Conditional实现条件化装配
根据不同的环境来装配不同的bean 企业级开发中,我们一般有多种环境,比如开发环境.测试环境.UAT环境和生产环境.而系统中有些配置是和环境强相关的,比如数据库相关的配置,与其他外部系统的集成等. 如 ...