news 2026/4/28 18:16:50

Elementor 自带的progress bar组件如何去掉百分比%符号

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Elementor 自带的progress bar组件如何去掉百分比%符号

Elementor 自带的progress bar 使用的时候,如下图:

则在前端,它会显示成这样:

如果想去掉百分比%符号,可以按下面的方法步骤:

1. 选中组件,然后到Advanced>CSS Classes 中填写no-percent-progress:

2. 在Advanced里添加自定义CSS:

.no-percent-progress .elementor-progress-percentage { font-size: 0 !important; color: transparent !important; position: relative !important; z-index: 1 !important; } .no-percent-progress .elementor-progress-bar { counter-reset: progress-value attr(data-max number) !important; } .no-percent-progress .elementor-progress-percentage::before { content: counter(progress-value) !important; font-size: 14px !important; /* 改成你页面的实际字体大小 */ color: #333 !important; /* 改成你页面的实际字体颜色 */ z-index: 2 !important; }

但是这样有一个问题,就是因为这个数字本身是百分比,所以填的数字只能是0-100之间的数字,而且如果数字很小的时候,这个百分比的颜色条会非常的短,看起来也会很难看。

那如果想这里能显示任意的数字,则用下面的方法步骤:

1. 第一步一样的,选中组件,然后到Advanced>CSS Classes 中填写no-percent-progress:

2. 在Advanced里添加自定义CSS:

.no-percent-progress .elementor-progress-percentage { position: relative !important; visibility: hidden !important; display: inline-block !important; } .no-percent-progress .elementor-progress-percentage::before { content: "50" !important; /* 这里填写你的进度条纯数字*/ visibility: visible !important; font-size: 16px !important; color: #333 !important; font-weight: normal !important; }

这个时候,进度条的长短还是通过原面板里的百分比数字来控制,但是显示的数字就是在上面的代码里来填写了。

可以达到如下的效果:

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/23 14:47:11

1000类物体精准分类|基于ResNet18镜像的离线识别实践

1000类物体精准分类|基于ResNet18镜像的离线识别实践轻量高效 离线可用 WebUI可视化交互 技术栈:PyTorch TorchVision Flask 模型:ResNet-18(ImageNet预训练) 部署方式:Docker镜像封装,CPU优…

作者头像 李华
网站建设 2026/4/18 8:03:59

ResNet18实战教程:零基础搭建通用物体识别系统

ResNet18实战教程:零基础搭建通用物体识别系统 1. 学习目标与项目背景 在计算机视觉领域,图像分类是深度学习最基础也是最重要的任务之一。从识别一张图片中的“猫”或“狗”,到理解复杂场景如“滑雪场”或“城市夜景”,通用物体…

作者头像 李华
网站建设 2026/4/18 13:10:44

嵌入式Linux工控平台下 error: c9511e 的全面讲解

深度解析嵌入式Linux工控开发中的error: c9511e:从踩坑到工程化防控在工业控制系统的软件开发一线,你是否曾遇到这样一个“拦路虎”——刚准备编译代码,终端却突然弹出一行红色错误:error: c9511e: unable to determine the curre…

作者头像 李华
网站建设 2026/4/19 6:15:17

Multisim14使用教程:负反馈电路构建指南

Multisim14实战指南:手把手教你搭建负反馈放大电路你有没有过这样的经历?想做一个音频前置放大器,查了一堆资料,画好了原理图,买齐了元件,结果一通电——输出全是噪声,或者干脆饱和成一条直线。…

作者头像 李华
网站建设 2026/4/23 13:34:48

NAS设备搭载USB3.2速度极限测试报告

NAS外接USB3.2速度为何跑不满?一次说清全链路性能真相你有没有遇到过这种情况:花大价钱买了支持“USB3.2 Gen 2x2”的NAS,又配了顶级NVMe SSD移动硬盘,结果拷贝4K视频时速度只有三四百MB/s,甚至还不如几年前的老设备&a…

作者头像 李华
网站建设 2026/4/22 17:13:10

AI+零信任:下一代数据安全智能体的架构演进

AI零信任:下一代数据安全智能体的架构演进 摘要 在当今数字化时代,数据安全面临着前所未有的挑战。传统的数据安全防护体系已经难以应对日益复杂多变的安全威胁。AI(人工智能)与零信任理念的结合为数据安全带来了新的思路和解决方…

作者头像 李华