你不能用CSS删除文本，所以你必须使用黑客。在你的例子中，你可以在旧的上面放一个新的::。
这是针对您的具体案例的具体解决方案。这不是一个通用的解决方案，如果您的真实的示例不同，它将无法工作

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

p em::after {
  content:"::" /* the new content */
}

em {
  position: relative; /* we need this to make the em above the next content */
  margin-right: -11px; /* this value depends on the font and you may need to change it */
  background: #fff; /* same as main background*/
}

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

不使用JavaScript的唯一方法是将::定义为伪元素的内容
CSS没有办法选择某个元素的一定数量的字符，你只能选择第一个字母
显然，有更多的方法可以解决这个问题，但是您需要在HTML中添加更多的元素
所以这是你唯一的选择

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

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

CSS伪元素可以解决这个问题，这里是Before pseudo element的细节。
ps -我用position和pseudo重新编辑了解。它将在实际冒号（：：）上创建覆盖。他们会用CSS隐藏在新冒号后面。

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

em::after {
  content: '::';
  color: red;
  font-style: italic;
  font-weight: 900;
  position: absolute;
  right:-10px;
  top:0px;
  background:#ffffff;
}

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