2026/3/28 16:12:08
网站建设
项目流程
怎么给购物网站做推广,子域名绑定wordpress子目录,建设银行手机银行网站,苏州cms建站Elementor 自带的progress bar 使用的时候#xff0c;如下图#xff1a;则在前端#xff0c;它会显示成这样#xff1a;如果想去掉百分比%符号#xff0c;可以按下面的方法步骤#xff1a;1. 选中组件#xff0c;然后到AdvancedCSS Classes 中填写 no-percent-progr…Elementor 自带的progress bar 使用的时候如下图则在前端它会显示成这样如果想去掉百分比%符号可以按下面的方法步骤1. 选中组件然后到AdvancedCSS Classes 中填写no-percent-progress2. 在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. 第一步一样的选中组件然后到AdvancedCSS Classes 中填写no-percent-progress2. 在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; }这个时候进度条的长短还是通过原面板里的百分比数字来控制但是显示的数字就是在上面的代码里来填写了。可以达到如下的效果