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映射图,读隔离(读关 ...
随机推荐
- JavaScript 关于setTimeout与setInterval的小研究
说明 在开发功能"轨迹播放"时,遇到了一个情况. 原先同事已经开发了一版,这次有个新功能:点击线上任意一点后可以从点击处重新播放. 看了一下原来的版本,发现同时使用了setTime ...
- Java流程控制之（一）条件
目录 条件语句 单if情况 单if/else情况 if/else多分支情况 switch条件语句 条件语句+循环语句,直接甩图甩代码! 条件语句 Java希望在某个条件为真时执行相应的语句. 单if情 ...
- java引用知识
最近从新拜读<深入理解Java虚拟机:JVM高级特性与最佳实践>这本书,看到有关引用的相关知识,以前没有好的习惯,这次看完在博客上记录下 引用:如果reference类型中的数据存储的数值 ...
- 数位dp介绍
不了解dp的可以先看一下dp 数位dp含义: 数位:一个数有个位,十位,百位,千位等等,数的每一位都是数位. 数位dp归为计数dp,是在数位上进行操作的dp. 数位dp的实质是一种快速枚举的方式,它满 ...
- 虚拟机配置net模式
在cmd中输入ipconfig -all查看 更改网络适配器 进入虚拟机左上角编辑----虚拟机网络编辑器查看VMnet8,虚拟机会为我们分配的固定ip段:如下图: ip段是128---254,所以设 ...
- CentOS 7 Nginx部署.NET Core Web应用
部署.NET Core运行时 必要前提 在安装.NET Core前,需要注册Microsoft签名秘钥并添加Microsoft产品提要,每台机器只需要注册一次,执行如下命令: sudo rpm -Uv ...
- webpack 4.x 从零开始初始化一个vue项目
创建目录 项目名称: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index ...
- ASP.NET Core SignalR ：学习消息通讯，实现一个消息通知
什么是 SignalR 目前我用业余时间正在做一个博客系统,其中有个功能就是评论通知,就是假如A用户评论B用户的时候,如果B用户首页处于打开状态,那么就会提示B用户有未读消息.暂时用SignalR来实 ...
- JavaScript新手经常遇到的问题（二）
1.Form表单只提交数据而不进行页面跳转的方法 <script type="text/javascript" src="js/jquery/jquery-1.8. ...
- 一文了解Nuget的使用
Nuget介绍 官网定义:NuGet是.NET的软件包管理器(免费).NuGet客户端工具提供了生成和使用软件包的能力.NuGet Gallery 是所有软件包作者和消费者都使用的中央软件包存储库. ...