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映射图,读隔离(读关 ...
随机推荐
- PostGIS 爆管分析之根据爆点找出所有影响阀门
环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) 说明: 做爆管分析的第一步,需要先 ...
- ArcGIS 发布Feature服务
运行环境: Win10 ArcGIS10.4 具体操作: 1.打开ArcMap,加载sde中导入的文件,也可以加载shp数据源指向sde中文件 2.保存成mxd,然后点share as-Service ...
- 2019牛客暑期多校训练营（第九场）Quadratic equation——二次剩余（模奇素数）
题意:给定p=1e9+7,构造x,y使其满足(x+y) mod p = b,(x*y) mod p = c . 思路:不考虑取模的情况下, .在取模的意义下,,因为a是模p的二次剩余的充分必要条件为 ...
- Leetcode 1020 飞地的数量
地址 https://leetcode-cn.com/problems/number-of-enclaves/ 给出一个二维数组 A,每个单元格为 0(代表海)或 1(代表陆地). 移动是指在陆地上从 ...
- PowerMock学习（十）之Mock spy的使用
前言 回顾下之前学过的内容,会发现一点,如果在mock后不写when和thenReturn去指定,即便是mock调用任何方法,什么也不会做,也看不到什么效果. 划重点的时候来了,本身mock出来的对象 ...
- Beautifulsoup模块基础详解
Beautifulsoup模块 官方中文文档 Beautifulsoup官方中文文档 介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的 ...
- WebGPU学习（三）:MSAA
大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例 下一篇博文 WebGPU学习(四):Alpha To Cov ...
- imageView的使用
转自:http://www.runoob.com/ios/att-ios-ui-imageview.html 图像视图用于显示单个图像或动画序列的图像. 重要的属性 image highlighted ...
- Pandas学习（一）——数据的导入
欢迎加入python学习交流群 667279387 学习笔记汇总 Pandas学习(一)–数据的导入 pandas学习(二)–双色球数据分析 pandas学习(三)–NAB球员薪资分析 pandas学 ...
- 鲲鹏来了,在EulerOS试用.NETCore-3.1
在EulerOS试用.NETCore-3.1 前言 EulerOS其实出来有一段时间了,一直在关注,单是仅仅也只是停留在观望的阶段,目前还没有接入的打算:正好看到园子里的兄弟分享了华为云免费试用的活动 ...