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映射图,读隔离(读关 ...
随机推荐
- 关于.ssh目录下的known_hosts文件的补充
一.关于.ssh目录下的known_hosts文件的补充 其实一开始是没有注意到的,按照网上的教程一步一步操作,并没有注意到这个文件的生成.直到有一次我试着去查询.ssh目录是否存在时,出现了下面的情 ...
- SpringMVC参数绑定学习总结【前后端数据参数传递】
目录 1. 绑定机制 2. 支持的数据类型 3. 参数请求中文乱码解决 4.自定义类型转换器 5.最后参数绑定学习小结 SpringMVC作为Controller层(等价servlet和struts中 ...
- JavaScript-----2初识
1.介绍 JavaScript是一种运行在客户端(自己的电脑上)的脚本语言不是在服务器上 脚本语言:不需要编译,运行过程由JS解释器(js引擎)逐行进行解释并执行 JavaScript不仅可以做前端编 ...
- 程序员的算法课（17）-常用的图算法：深度优先（DFS）
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/m0_37609579/article/de ...
- css多行文本溢出显示省略号（兼容ie）
在日常编写页面中,我们经常遇到内容行数过多时,需要出现 “...” 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-box; -webkit ...
- Scala： Case classes
Case classes are like regular classes with a few key differences which we will go over. Case classes ...
- 一文看尽Java-并发编程知识点
一.前言 从7月份开始一直加班比较多,一直到双11结束,博客没跟上写,接下来写一点总结性的东西,比如Java并发编程总结.Mybatis源码总结.Spring源码和基础知识总结,首先来看下并发 ...
- 转:java 解析excel，带合并单元的excel
收集了一些对博主有帮助的博文,如下 >>>>>>>>>>>第一部分: 首先,mavn导入jar包 <!-- 解析excel需要导 ...
- [NACOS HTTP-GET] The maximum number of tolerable server reconnection errors has been reached
错误的意思是:已达到可容忍的服务器重连接错误的最大数目.有两个解决思路:一个将这个值设置的更大:然后是排查自己连接服务哪儿出了问题.先说在哪儿设置这个值:在拉取nacos服务的注解配置中,添加一个属性 ...
- 用workspace管理工程，并解决多静态库依赖
from:http://www.cnblogs.com/perryxiong/p/3759818.html 最近我在项目中遇到一些工程之间的管理问题. 模型: 其中 库A 是一个公共的基础静态库, ...