无法添加HTML标签时，如何用CSS为两个冒号设置与<em>一致的格式？

现有如下HTML代码片段：

<p><em>meta key here</em>:: meta value here</p>

以及CSS代码：

i, em {
  color: red;
  font-size: 80%;
  font-style: italic;
}

需求为将上述HTML中的两个冒号（::）设置为与<em>元素相同的格式，但无法在源码中添加更多HTML标签，仅可使用CSS实现，请问该如何操作？

可以通过CSS伪元素替换原冒号并隐藏源码中的冒号，具体实现如下：

修改后的CSS代码：

i, em {
  color: red;
  font-size: 80%;
  font-style: italic;
  position: relative;
  padding-right: 2ch;
  margin-right: -2ch;
}

em::after {
  content: "::";
  position: absolute;
  left: 100%;
  top: 0;
  color: red;
  font-size: 80%;
  font-style: italic;
  margin-left: 0.1ch;
}

p {
  overflow: hidden;
}

原理说明 #

• 给<em>设置position: relative，让伪元素能基于它定位；通过margin-right: -2ch把源码中<em>后的两个冒号（占2个字符宽度）挤到<p>可视区域外，再用<p>的overflow: hidden隐藏这部分内容。
• 利用<em>的::after伪元素生成新的冒号，设置和<em>一致的样式，并定位到<em>右侧，替代原冒号的位置。

这样无需修改HTML源码，就能让冒号拥有和<em>完全相同的样式。

内容的提问来源于stack exchange，提问作者Istvan Robotka