css伪元素以及counter计数器
-
css的伪类有:::before、::after、::first-letter、::first-line、::selection
::before、::after 用于在元素之前之后插入内容。
::first-line、 ::first-letter用于改变元素 首行、首字母样式。
::selection 用于改变选中样式
.wrap .p::first-line{ color: RED; /* 首行变红 */ } .wrap .p::first-letter{ color: blue; /* 首字母变篮 */ } .wrap .p::selection{ color: green; /* 选中文字变绿 */ }
::before、::after有content属性,用来插入内容
接下来主要介绍content中的counter(计数器)属性
1、css计数器通过一个变量来设置,根据规则递增变量。
2、使用计数器自动编号
- counter-reset 创建或重置计数器
- counter-increment 递增变量
- content 插入生成的内容
- counter()或counters()函数 将计数器添加到元素
使用计数器:
body{ counter-reset: my; /* 创建计数器 */ } .p::before{ counter-increment: my; /* 计数器递增 */ content: counter(my)'哈' /* 用counter函数把计数器插入到元素中 */ }
效果
-
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2020-04-14 vue项目中集成腾讯TIM即时通讯
2020-04-14 vue中设置alias
2019-04-14 git温习