Css 删除网页上冒号符号的跳转

我有一个网页，上面有时间

12:45

。用户可以单击该时间将其隐藏（第二次单击将再次显示）。然后时间被隐藏，显示为

−−:−−

我想防止用户单击时元素跳跃

没有水平运动，但有垂直运动。当时间变为负数（和倒数）时，冒号移动

下面是显示冒号跳跃的动画gif：


下面是一个jsfiddle，其中包含显示问题的代码

如何更改代码使冒号为静态？
您是否希望这样：


var i=0；
var intervalID=setInterval（函数（）{
如果（i==0）{
//这是减号−') 字符，而不是“破折号”（“-”）字符
$（'.mins'）.text（'−−');
$（'.secs'）.text（'−−');
i=1；
}否则{
i=0；
$（'.mins'）.text（'12'）；
$（'.secs'）.text（'45'）；
}
}，300）；
.main{
显示器：flex；
}
.分钟，.秒{
字体大小：10rem；
宽度：200px；
字体变量数字：表格格式NUM；
字体系列：BlinkMacSystemFont；
}
科隆先生{
字体大小：10rem；
宽度：60px；
}

12
:
45
只是想让冒号变为静态？（即）冒号应该是静态的，12、14应该闪烁（将要更改）。谢谢！这很好。我不想创建多个div，而是想使用一个。但是如果我不知道如何做，我会使用你的解决方案。我删除了div，用span替换了所有div。即使你不想使用span？