news 2026/5/19 20:58:09

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/5/19 18:48:00

超详细版BJT偏置电路工作原理解读:稳定工作点设计

如何让BJT放大器不“发飘”?揭秘静态工作点稳定背后的电路智慧你有没有遇到过这样的情况:一个看似设计完美的BJT放大电路,在实验室里调得好好的,结果换个温度环境或换一批晶体管,输出信号就开始失真、漂移,…

作者头像 李华
网站建设 2026/5/16 5:23:17

电路仿真软件仿真多级放大电路的实战技巧

多级放大电路仿真:从“试出来”到“算出来”的实战精要你有没有遇到过这样的场景?一个三级放大器原理图画得漂亮,参数计算也看似合理,结果一上电——输出波形满屏振铃,甚至直接自激成高频振荡。拆电阻、换电容、改布局…

作者头像 李华
网站建设 2026/5/11 2:01:03

PCIe高速信号PCB布局的项目应用实例

PCIe高速信号PCB布局实战:从设计翻车到Gen4稳定运行的全过程在我们最近开发的一款工业级AI推理主板项目中,原本计划通过PCIe Gen4 x4接口直连NVMe SSD,实现高达8 GB/s的理论带宽。然而,第一版PCB打样回来后,系统却只能…

作者头像 李华
网站建设 2026/5/12 8:54:23

基于Multisim的模拟电路实验设计:手把手教学指南

用Multisim做模拟电路实验,真的比搭面包板还香?你有没有过这样的经历:花了一下午在面包板上连好一个放大电路,结果示波器一接,输出波形不是削顶就是振荡;查了半小时线路,发现是某个电阻焊反了&a…

作者头像 李华
网站建设 2026/5/1 6:32:38

超详细版fastboot驱动协议数据包结构分析

深入fastboot协议:从数据包结构到实战驱动开发你有没有遇到过这样的场景?设备变砖、系统无法启动,ADB进不去,Recovery也打不开——但只要按下“音量下电源”,进入Bootloader模式,一条fastboot flash boot b…

作者头像 李华
网站建设 2026/5/15 10:38:04

面向工业测试的数字频率计设计完整指南

面向工业测试的数字频率计设计:从原理到实战的完整技术解析在电机控制、传感器校准、电力电子监测等工业场景中,频率是衡量系统运行状态的关键指标。一个微小的频率漂移,可能意味着设备即将失稳;一次未捕捉到的脉冲跳变&#xff0…

作者头像 李华