浅析如何借助content属性显示CSS var变量值及计数器counter-reset和counter-increment介绍
2023-09-11 14:19:55 时间
一、变量作为字符动态呈现
CSS var变量(CSS自定义属性)很好用,然而有时候,需要这些变量能够同时作为字符在页面中呈现,我们想到的是使用::before/::after
伪元素配合content
属性,但是,把CSS变量直接作为content
属性值是没有任何效果的。那该如何呈现呢?
/* 无效 */
.bar::before {
content: var(--percent);
}
二、借助CSS计数器呈现CSS var变量值
示意代码如下:
/* 有效 */
.bar::before {
counter-reset: progress var(--percent);
content: counter(progress);
}
也就是虽然content
属性本身不支持变量,但是counter-reset
属性后面的计数器初始值是支持的,于是我们可以来一招移花接木让CSS var变量值作为字符在页面中显示。
三、实际应用案例展示
例如我们需要实现一个进度条效果,已经加载完成了部分的宽度百分比值和进度值是一样的,最好可以通过一个变量控制,这样会大大简化我们的实现。
此时,CSS var变量非常适合使用。例如下图所示的效果:
HTML结构非常简单,就是一个单标签,没有任何嵌套:
<body>
<label>图片1:</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2:</label>
<div class="bar" style="--percent: 45;"></div>
<label>图片3:</label>
<div class="bar" style="--percent: 20;"></div>
<div class="count-down" style="--t: 5"></div>
</body>
关键是CSS,这里就应用了这里的CSS变量值呈现技巧:
.bar {
height: 20px; width: 300px;
background-color: #f5f5f5;
}
.bar::before {
display: block;
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
width: calc(1% * var(--percent));
color: #fff;
background-color: #2486ff;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
.count-down::after{
counter-reset: time var(--t);
content: counter(time);
}
见文章:小tips: 如何借助content属性显示CSS var变量值: https://www.zhangxinxu.com/wordpress/2019/05/content-css-var/
四、counter-reset和counter-increment
1、定义
counter-reset 创建或重置一个或多个计数器
counter-increment 计数器增长的步长
2、用法:counter-reset <counter-name> number
- 可设置多个计数器
- <counter-name> 是计数器名字
- number是该计数器初始值,忽略时默认为0
/* 将自定义的计数器section 设置为0 */
counter-reset section
/* 将自定义的计数器section 设置为20 */
counter-reset section 20
/* 将自定义的计数器section-1 设置为2 section-2 设置为20*/
counter-reset section-1 2 section-2 20
3、实例及注意事项
counter-increment通常都配合伪类使用,此时注意设置content样式的属性,至少也要有个"",否则:before会不起作用的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css counter</title>
<style>
body {
counter-reset: firstName;
}
h2{
list-style: none;
counter-reset: twoName;
}
h2:before {
counter-increment: firstName;
content: "Section " counter(firstName) ". ";
}
li:before {
counter-increment: twoName;
content: counter(firstName) "." counter(twoName) " ";
}
li{
list-style: none;
}
</style>
</head>
<body>
<h2>圣诞节系列</h2>
<ul>
<li>麋鹿</li>
<li>平安夜</li>
<li>圣诞老人</li>
</ul>
<h2>元旦系列</h2>
<ul>
<li>跨年</li>
<li>放假咯</li>
<li>吃火锅</li>
</ul>
</body>
</html>
其实很简单,就是 h2 标签递增了 firstName 计数器,li 标签里递增了 twoName 计数器
相关文章
- [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
- 详解 CSS 属性 - position
- 消息队列属性及常见消息队列介绍
- CSS - 工具类 tool.css
- yii2打印数据属性(字段名)/数据
- 让IE7/8使用CSS中first-child和last-child样式属性
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
- Code片段 : .properties属性文件操作工具类 & JSON工具类
- 前端学习 -- Css -- 属性选择器
- Python - 属性简介"__name__"
- [CSS] Purgecss to remove unused css
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
- [CSS] Purgecss to remove unused css
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- css flex属性学习笔记
- SAP Cloud Platform上Destination属性为odata_gen的具体用途
- SAP UI5 应用 index.html 里引导 script 属性的解析原理
- iOS swift 设置电量 计算属性实例
- Qt QSS基本属性设置
- 〖大前端 - 基础入门三大核心之CSS篇⑨〗- CSS3文本的常用文本样式属性之段落和行的属性
- 〖大前端 - 基础入门三大核心之CSS篇⑲〗- CSS精灵的使用 与 background综合属性
- 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用
- 面试官问我:CSS有哪些属性可以继承?
- C#界面里的winform AutoValidate和CausesValidation属性
- CSS_使用css布局
- JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)
- 【CSS】css转换、css过渡、css动画_09
- css 选择器有哪些?优先级?哪些属性可以继承?
- 药物分子关于RO5等常用属性计算(LogP, TPSA, MW, QED....)
- java入门 常见问题0014:有get/set的属性建议设置为private,否则get/set可能失去作用