如何在倒计时数字之间添加冒号

默认情况下，GemPages 中的倒计时元素会分别显示每个时间单位（天、小时、分钟、秒），而没有分隔符。

如果你想让你的倒计时器看起来更简洁、更专业，你可以添加冒号（:）在每个数字之间使用一小段自定义 CSS 代码片段。 本指南将向您展示如何通过几个步骤完成此操作。

在你开始之前

请确保你已经拥有 倒计时元素 已添加到您在 GemPages 中的页面。

此自定义功能适用于 GemPages 中的倒计时元素，需要添加自定义 CSS 代码段。

步骤 1：打开倒计时元素自定义代码区域

• 在 GemPages 中打开页面编辑器。
• 点击您 Countdown 元件。
• 右键单击该元素。
• 选择 自定义代码.

这将打开自定义代码面板，您可以在其中添加 CSS 代码。

步骤 2：添加自定义 CSS

将以下代码粘贴到“自定义代码”区域：

.ElementClass #section-countdown > div {

相对位置：;

}

.ElementClass #section-countdown > div:not(:last-child):after {

内容： '：';

位置：绝对;

右：-2.5px；

最高：50%；

变换：translateY（-50%）；

line-height：1;

font-size：16px;

字体重量：粗体;

padding-bottom：3px;

颜色：#121212;

}

粘贴代码后，替换 .元素类 使用您实际的元素类。 

关于间距的重要说明

根据您的倒计时布局、字体大小、间距或设计设置，您可能需要进行调整。 右 结肠定位的价值。

例如：

右：-2.5px；

您可以尝试以下值：

右：-1px；

右：-4px；

右：-6px；

直到你的设计中的间距看起来合适为止。

您可以观看此视频教程了解更多详情： 织机教程视频

第 3 步：保存并发布

• 点击 已保存.
• 发布或更新您的页面。
• 预览页面以检查倒计时样式。

您的倒计时器现在应该在每个数字段之间显示冒号。