小tips: 如何借助content属性显示CSS var变量值

这篇文章发布于 2019年05月28日,星期二,22:24,归类于 CSS相关。 阅读 25513 次, 今日 1 次 10 条评论

 

CSS变量缩略图

一、变量作为字符动态呈现

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计数器如果不太了解,可以参考我之前这篇文章:“CSS counter计数器(content目录序号自动递增)详解”。

三、实际应用案例展示

例如我们需要实现一个进度条效果,已经加载完成了部分的宽度百分比值和进度值是一样的,最好可以通过一个变量控制,这样会大大简化我们的实现。

此时,CSS var变量非常适合使用。

例如下图所示的效果:

单标签与变量实现的上传进度条效果

HTML结构非常简单,就是一个单标签,没有任何嵌套:

<label>图片1:</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2:</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3:</label>
<div class="bar" style="--percent: 20;"></div>

关键是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;
}

您可以狠狠地点击这里:CSS百分比变量与进度条demo

四、小小结束语

虽然是个小技巧,但很实用,目前我已经在项目中多次使用,写这篇文章也是方便自己快速查找,实际用的时候就把代码拷贝一下,改一下变量名就可以了。

抛砖引玉,如果遇到其他需要动态显示变量的场景,也可是试试本文的这个呈现技巧。你不必现在就牢记,只要有个印象就可以了,到时候进去我的博客,搜索“CSS变量”或者直接搜索“var”就可以找到本文了。

好,我要说的这些内容,感谢阅读,欢迎交流。

(本篇完)

分享到:


发表评论(目前10 条评论)

  1. 马斯克说道:

    今天也遇到一个这样的需求,查了一圈都是鑫哥的解法,都是放数字才有用,我们需求是变量里放中文(–text:张三)导致counter-reset属性设置了也没用,不知道鑫哥有没有兴趣折腾一下伪类content属性 var变量值为字符串要怎么显示

  2. 浅浅说道:

    鑫哥 鑫哥 ,两周前刚好在一个页面中有数据统计,有进度条的展示,看到你的这个方法,可把我美死了,直接就拿来用了,刷刷两下,样式效果都出来了,测测测改改改,两周过去了,今天上线,突然发现在ios上面进度条上的数字显示不出来,但是进度的样式长度是没问题的,就是数字不显示,然后凉凉了。哎。。。找了半天想了各种法子也不知到是什么问题,最后解决方案就是把进度数字拿出来重新定位,然后把进度条上的数字样式透明化处理了。请教鑫哥这个样式是不是有兼容性问题,还是?

  3. 多除了个100说道:

    width: calc(1% * var(–percent) / 100);

  4. XboxYan说道:

    赞~。

    可惜计数器只能是整数,如果是小数就不好使了。

    下面修改了一个可以支持小数的demo(也有一定的局限性)

    https://codepen.io/xboxyan/pen/dEqNvW

  5. main说道:

    有问题

    如果css变量是字符串是可以用在伪类的
    .bar{
    –percent: ‘100’;
    }
    .bar::before {
    content: var(–percent);
    }

  6. bilibili说道:

    以前不知道如何动态改变伪元素的content,所以demo的效果都是用html实现百分比的文字显示。现在嘛,学到了学到了。

  7. DeathGhost说道:

    这个好,回头研究研究…😆