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函数把计数器插入到元素中 */
}

效果

 

 

 

 

 

-

posted @   古墩古墩  Views(135)  Comments(0Edit  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
历史上的今天:
2020-04-14 vue项目中集成腾讯TIM即时通讯
2020-04-14 vue中设置alias
2019-04-14 git温习
点击右上角即可分享
微信分享提示