css before after用法_CSS 伪元素基础知识:content 与counter 实用技巧(二)

9033526f9fb22f07e9b02b03a0732d6a.png

在CSS 伪元素基础知识:before 与after (一),笔者已经介绍过 CSS 里的::before 和::after 这两个伪元素,以及content 相关的用法,这篇将针对content 搭配counter (计数器) 进行一些有趣的应用,相信熟练之后搞不好能做出很好玩的内容。

counter 基本用法

在CSS里头,counter是个很有意思的功能,最常见得就是如果我们使用list清单,样式选择decimal十进制,当清单内容变多的时候数字也会随着递增,底层貌似就是使用counter的原理,也因为counter 所产生的数值并不实际存在于网页的元素内,所以如果我们要在清单元素之外使用,就必须透过::before 或::after的content来实现。

counter最的基本用法一定要有一个父元素和子元素(类似list的原理,比如使用ul包着li ),所以页面布局会类似下面这段html:

钢铁侠 美国队长 雷神索尔

在CSS里头,先针对div父元素使用counter-reset:num;进行计数器初始化的设置,里面num是计数器累以数值计算的设置,接着可以在span::before里面看到counter-increment:num;这一段,这段的作用是把num累加上去,预设数值为加1,接着就通过content这个属性显示出来。

计数器预设的显示语法为:counter(计数器名称, list-style-type)

div{ counter-reset:num;}span{ display:block;}span::before{ counter-increment:num;  content:counter(num) '. ';}
1fb38f86b799cbad47f1447c6a733f77.png

通过指定一开始counter-reset 的起始计数值,还有counter-increment累加的递增数值(步长),还可以指定从某个数值开始计数。

div{ counter-reset:num 3;}span{ display:block;}span::before{ counter-increment:num 2;  content:counter(num) '. ';}
460f78f49c2141f6443f6afa1dbcc81e.png

如果要更换数字的样式,也可以透过计数器的第二个设定值list-style-type来更改,下面的例子就是将样式更改为georgian。

div{ counter-reset:num;}span{ display:block;}span::before{ counter-increment:num;  content:counter(num, georgian) '. ';}
030e4c393d934def4d539c13fa481e2d.png

counter 进阶用法

除了指定单一个变数外,counter 也可以同时指定多个变数,例如下面这段HTML,有三个类别在里面,我分别用span、i 和b 来分类。

钢铁侠 美国队长 雷神索尔 神盾局 神鬼局 神经局 九头蛇 九头牛 九头猪

CSS一开始counter-reset可以指定多个计数器,通过一个空白字符进行分隔,如果空白字符后面跟着数字则是起始值,没有数字预设为1,当这样设定之后,就可以看到不同类别的数字代号就不同。

div{ counter-reset:num numi 2 numb 5;}span, i, b{ display:block;}span::before{ counter-increment:num;  content:counter(num) '. ';}i::before{ counter-increment:numi 2;  content:counter(numi) '. ';}b::before{ counter-increment:numb 5;  content:counter(numb) '. ';}
8169aededa98025ff788658303266b3e.png

如果遇到了层级结构(目录结构),需要一层层的展开( 例如:1 > 1.1 > 1.1.1 ),采用上述的作法可能就会复杂许多,好在counter 还提供了另外一个counters 的功能,目的就是来解决层级结构的麻烦事,在开始前可以先看看通过ul和li组合的清单布局结构:

  • 第一层
    • 第二层
      • 第三层
      • 第三层
      • 第三层
    • 第二层
    • 第二层
  • 第一层
    • 第二层
    • 第二层

传统的清单如果将list-style设为decimal,同样可以具备数字连续的功能,但相对来说要做一些特殊变化就办不到了。

li{ list-style:decimal;}
084c062abb7c76a89deffb5963877a2e.png

通过content 和counters 的搭配,我们就可以告别预设值的困扰,甚至可以在不使用清单ul 和li 的状况下,实现和清单一模一样的效果,举例来说,我们纯粹通过div 模拟一个清单的布局( 仍然必须是有父元素和子元素的概念),里面的样式b 就等于是ul,样式a 就等于是li:

第一层
第二层
第三层
第三层
第三层
第二层
第二层
第一层
第二层
第二层

由于b的外层没有东西,所以一开始要把body 和b 都进行counter reset 的动作,接着通过counters 的使用,让计数器的数值可以一个接着一个放进去,如此一来就可以做到原本清单不容易实现的效果了。

counters 使用语法:counters(计数器名称, 分隔符, list-style-type)

body, .b{ counter-reset:c;}.a::before{ content:counters(c, ".") ":"; counter-increment:c; }div{ margin-left:10px;}
1d460bf2a99052a2dc7ca4c5f0705bc3.png

了解原理之后,通过::before 和::after 的交互应用,就可以做出颇具特色的清单效果。

body, .b{ counter-reset:c;}.a{ box-sizing:border-box; position:relative; line-height:40px;}.a .a{ padding-left:30px;}.a::after{ content:''; box-sizing:border-box; display:inline-block; position:absolute; z-index:-1; top:0; left:0; width:100%; height:40px; margin-left:30px; box-shadow:inset 0 2px #666; background:#eee;}.a::before{ content:counter(c, upper-roman); counter-increment:c; display:inline-block; width:30px; height:40px; background:#666; color:#fff; text-align:center; margin-right:5px;}
fbbc51a79577bdc4a1402b3e9d4c2d4a.png

文章来源:https://www.oxxostudio.tw/articles/201706/pseudo-element-2.html

原文作者:oxxostudio

由于网页为繁体内容,术语描述和话术与我们有差异的问题,笔者在保证不改变原意的基础上做了调整,并在此基础上进行了错误校正,如发现问题,欢迎你的指正

小结

dee53627ac3a1f265edec4fcce2311d5.png

原本网页里面使用的清单列表展示,如果要进行样式的修改、或是一些编号的设置,往往都要通过JavaScript来实现,如果熟练了counter的用法,搞不好纯粹使用CSS 就能取代掉大部分JavaScript也说不定呢,更多的惊喜有待你的发现。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245449.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python pandas缺失值处理_Pandas之缺失值处理

原标题:Pandas之缺失值处理本文作者:杨长青本文编辑:周聪聪技术总编:张学人好消息!!!爬虫俱乐部将于2019年5月2日至4日在武汉举行Stata编程技术五一训练营,此次采用理论与案例相结合…

c语言怎么让写的函数兼容int型和char型_既然C语言void指针是“万能指针”,那么malloc还需类型转换吗?...

在C语言程序开发中,动态内存分配是不可避免的,而调用 malloc()/free() 库函数实现这一过程是方便的,事实上,在很多C语言程序中,malloc/free 库函数的使用相当频繁,它俩的C语言函数原型如下,请看…

python奖励多少钱_关于python的问题,好的高奖励!

我想设计一个猜数字程序:系统随机生成一个四位数a,之后用户也输入一个四位数b,这里,将进行判断:b中各个数位上的数字是否在a出现,有出现,那么将b中的那个数为上的数字定位Y......(简略...我想设计一个猜数字程序:系统随机生成一个四位数a,之后用户也输入一个四位数b,这里,将进行…

如何在mysql中添加用户_如何给mysql数据库添加一个用户

首先以root身份登录到MySQL服务器中。$ mysql -u root -p当验证提示出现的时候,输入MySQL的root帐号的密码。创建一个MySQL用户使用如下命令创建一个用户名和密码分别为"myuser"和"mypassword"的用户。mysql> CREATE USER myuserlocalhost I…

python可视化图表工具_酷炫的可视化图表工具来帮忙 深度评测五大Python数据可视化工具...

原标题:酷炫的可视化图表工具来帮忙 深度评测五大Python数据可视化工具不少Python用户的一大诉求是做出各种酷炫的可视化图表,而这就需要了解清楚工具特色,才好在制作不同类型图表顺利找到适合自己的那一款。今天就来聊聊五个Python数据可视化…

mysql datetime最小值_MySQL的5种时间类型的比较

日期时间类型占用空间日期格式最小值最大值零值表示DATETIME8 bytesYYYY-MM-DD HH:MM:SS1000-01-01 00:00:009999-12-31 23:59:590000-00-00 00:00:00TIMESTAMP4 bytesYYYY-MM-DD HH:MM:SS197001010800012038 年的某个时刻00000000000000DATE4 bytesYYYY-MM-DD1000-01-019999-1…

python制作海报_生成海报(前端 | python)

我最近没有摸鱼,一直都在工作。只不过目前需要爬一点数据 python 做的,之后看机会分享一下。忙着忙着老大说要生成海报,有个活动要给每个用户来个分享图。想法PS 批处理?脚本? 能甩出去的活都甩出去,机智如…

Mysql数据库的简单备份与还原_史上最简单的MySQL数据备份与还原教程

本文主要为大家详细介绍了史上最简单的MySQL数据备份与还原教程第一篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。数据备份与还原第一篇分享给大家,具体内容如下基础概念:备份,将…

python正负数转换,如何在Python中将负整数值转换为十六进制

I use python 2.6>>> hex(-199703103)-0xbe73a3f>>> hex(199703103)0xbe73a3fPositive and negative value are the same?When I use calc, the value is FFFFFFFFF418C5C1.解决方案Pythons integers can grow arbitrarily large. In order to compute the …

mysql 分表索引_mysql中,分表查询和索引查询哪个更快?

谢谢邀请!查询快慢主决的因素有很多,存储碎片、数据量大属于I/O类问题;表结构设计、查询语句属于技术是否熟练(经验)问题。对于你的分表快还是索引快的这个问题本身就是有问题的:在建立数据表的时候,索引是必须的&…

fluent python 第二版_Fluent Python 笔记(二):序列基础

目录:本篇开始总结 Python 基本的数据结构,大部分情况下,这些数据结构就已经够用了,不需要重复造轮子。首先是序列及其相关的操作。序列(Sequence)标准库中提供了很多序列类型,都是C实现的,效率很高。容器序…

mysql数据库云读取_云数据库 MySQL版

{"moduleinfo":{"banner_bigTit":"云数据库 MySQL版读写分离上线","banner_subTit":"自动扩展读写分离,性能提升不止一点","banner_link":"https://rdsnew.console.aliyun.com/console/index#/rd…

mysql数据库整体备份和恢复_MySQL 数据库的备份和恢复

MySQL 数据库的备份和恢复  基本知识>>>>>>>  逻辑备份:  1.mysqldump(数据导出工具)  mysqldump options db_name[table_name]//备份单个数据库  mysqldump 选项 --database database-name1 [databases-name2]....//备份指定的数据库一个或者多…

mysql查询并设置高亮_慢查询分析调优工具~mysqldumpslow

在日常的业务开发中,MySQL出现慢查询是很常见的,要么说明你家产品的增长性很好,要么就是你的SQL写的太烂了。所以对慢查询SQL进行分析和优化很重要,其中mysqldumpslow是MySQL服务自带的一款很好的分析调优工具。MySQL慢查询日志My…

数据库安装mysql57_记录CentOS7.X版本下安装MySQL5.7数据库

记录CentOS7.X版本下安装MySQL5.7数据库设置rpm下载目录在/opt目录下新建一个目录存放mysqlcd /optsudo mkdir mysql12下载MySQL的源如果在这之前没有提示-bash: wget: command not found,那么还得先安装wgetsudo yum install wget1安装MySQL的rpmsudo rpm -ivh mys…

python递归函数的思想_Python递归函数实例讲解

Python递归函数实例1、打开Python开发工具IDLE,新建‘递归.py文件,并写代码如下:def digui(n):if n 0 :print ()returnprint (**n)digui(n-1)if __name__ __main__:digui(5)这里递归打印*号,先打印后递归2、F5运行程序,打印内容…

非法的表达式开始_轮回、开始还是结束?

上节课说到&#xff0c;要打印0-9这十个数字&#xff0c;除了一个一个的 document.write 还有什么办法?下面介绍一个for语法for (var 变量 初始值; 结束判断表达式; 变量递增/递减) { 循环体&#xff0c;用于处理变量;}我们来实操一下for (var c0;c<9;cc1) { do…

sql 统计记录条数后 打印出所有记录_用SQL完成购买行为分析(下篇II)

&#xff08;接《用SQL完成购买行为分析&#xff08;下篇I&#xff09;》内容&#xff09;12&#xff09;查询首条记录为fav&#xff0c;总记录条数为14的记录。将前面getNum(3)红框处替换为12&#xff0c;运行getNum(14)得到第2条记录的数量&#xff1a;替换为11&#xff0c;得…

library的英语怎么读音_library怎么读声音

library的英式读音和美式读音均为&#xff1a;[ˈlaɪbrəri]。library可作名词&#xff0c;其作名词时&#xff0c;中文意思有&#xff1a;图书馆&#xff1b;藏书楼&#xff1b;图书室&#xff1b;资料室&#xff1b;(书、激光唱片等的)个人收藏等含义。一、library 读音英式…