今天在做一个类似下面显示效果的活动页:

在前端骚操作越来越多的普遍趋势影响下,前面用箭头表示出的东西,我打算直接用before伪类去搞,这样不仅减少了标签的使用,对自己工作量的减少也是有少许作用的,然而具体实施是遇到一个头疼的问题就是伪类的content的值,因为content的值是要递增的,所以不知道counter之前,我想到的就是nth-child选择器和js控制,但是这两种,无论哪一个工作量都不小,而且,用js更有可能引发回流造成页面的性能影响。

好在,之前看张鑫旭《css世界》一书的时候,对counter略有映象,所以就把思路放到counter上了,经过十几分钟的时间成功实现了这个效果。下面结合官方解说(MDN),以及自己的理解说一下counter。

counter-reset

The counter-reset CSS property is used to reset CSS Counters to a given value.

就是说一个counter会由counter-reset重置,语法如下:

counter-reset:<custom-ident> <integer>

一般来讲,用到counter的地方肯定会是一个列表,或者类似列表的东西,所以重置一个counter应该选择在他们共同父级上,比如,我的dom长这样:

那初始化counter的地方肯定就是在ul上了!初始化之后,就要决定这个counter应该 在什么时候开始类增,所以就到counter-increment出场的时候了:

counter-increment

The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property.

更具体一点来说,这个属性就是用来改变前面counter-reset初始化之后的counter的,他决定了counter应该在什么时候增加,每次增加多少 ,想我前面那个dom结构肯定是遇到li的时候增加的。语法

counter-increment:<custom-ident> <integer>

以上引用均来自MDN。

所以可以写出以下的css:

    ul{
        counter-reset: order 0;/*counter初始化*/
    }
    ul li{
        position: relative;
        width: fit-content;
        margin: 0 auto 15px;
        counter-increment: order 1;/*counter变化*/
        list-style:none;
    }
    ul li::before{
        content: counter(order);/*counter的使用*/
        position: absolute;
        left: -40px;
        top: 20px;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #000;
        border-radius: 50%;
        background:#fff;
    }

用css就可以实现累加效果的神器--counter的更多相关文章

  1. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  2. css实现气泡框效果

    前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种 ...

  3. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  4. 原生JS、CSS实现的转盘效果(目前仅支持webkit)

    这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...

  5. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  8. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  9. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  10. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

随机推荐

  1. 人工生命(AL:Artificial life)兰顿蚂蚁多版本代码html\go\php\python\java

    背景介绍 人工生命(AL:Artificial life)这一概念由美国计算机科学家.人工生命领域创始人之一克里斯托弗・盖尔・兰顿(Christopher G. Langton)提出.1986 年,兰 ...

  2. Vue3使用Vuex 教程(这才是真正的小白教程!)

    我的项目是vue3+element-plus 我是个菜鸡,我不懂前端.想做一个tags的导航标签页.但是点击标签页之后页面仍然是会重新请求.感觉这不就跟没做一样吗? 遂百度GPT,第一种方式采用的就是 ...

  3. [转]win10 vue-cli 下载成功,显示 vue不是内部或外部命令,也不是可运行的程序

    vue不是内部或外部命令,也不是可运行的程序 1.安装vue-cli npm install -g @vue/cli 2.查看是否安装成功 vue -V 经过上述步骤,一般在CMD窗口输入" ...

  4. C#操作MySQL数据库——思路简单清晰

    1.下载mysql.Data.dll,在解决方案->引用中引入,并在文件头部引入 using MySql.Data.MySqlClient; 2.创建MySqlConnection对象(链接库) ...

  5. [转]关于c#中遍历从数据库中取出的DataTable集合

    作为刚进入c#语言不久的小白,我们需要掌握的基本操作之DataTable集合.首先你需要一个sql语句,这里我就不写了,但是这里要注意,这个sql语句的目的是查出你需要的一张数据表,这个时候才会用到D ...

  6. 字符编码技术专题(一):快速理解ASCII、Unicode、GBK和UTF-8

    本文由阮一峰(ruanyifeng.com)分享,本文收录时有内容修订和排版优化. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象的复 ...

  7. 使用 SK Plugin 给 LLM 添加能力

    前几篇我们介绍了如何使用 SK + ollama 跟 LLM 进行基本的对话.如果只是对话的话其实不用什么 SK 也是可以的.今天让我们给 LLM 整点活,让它真的给我们干点啥. What is Pl ...

  8. 论文解读 原苏木素A通过靶向ACSL4/FTH1轴依赖性铁凋亡保护阿霉素诱导的心肌损伤和心功能障碍

    同学们,大家好!今天给大家介绍一篇研究性论文,原苏木素A通过靶向ACSL4/FTH1轴依赖性铁凋亡保护阿霉素诱导的心肌损伤和心功能障碍,想了解这方面的同学们可以重点关注一下.这篇文章是2024年7月份 ...

  9. IntelliJ IDEA2020永久激活破解教程(无限试用)

    IntelliJ IDEA2020激活破解教程(无限试用) 鉴于想拥有一个十分舒适的编程环境,我特意将自己的电脑运行内存从4G扩展到12G,加装一个256G的固态作为C盘,并且将系统升级为Window ...

  10. SpringCloud(一) - Dubbo + Zookeeper

    Dubbo 和Zookeeper 不是SpringCloud的东西,放在这里只是为了方便复习: 1.下载安装Zookeeper和Dubbo 1.1 下载安装教程 下载安装教程 windows环境下安装 ...