CSS ::before伪元素中Github SVG作为背景图显示异常如何解决？

问题场景 #

使用CSS ::before 伪元素在链接前插入GitHub图标时，出现SVG颜色无法正常渲染的问题。该SVG作为普通图片引入时显示正常，仅在设置为background背景图时失效，尝试调整无背景色、多种背景色、透明背景均无法解决。

根因定位 #

问题由CSS简写属性的覆盖特性导致：
background是复合简写属性，你先给多站点链接伪元素设置了公共样式，包含background-size: contain规则，后续单独覆盖GitHub链接的background简写属性时，所有未在简写中显式声明的背景相关属性都会被重置为默认值，background-size会被重置为默认的auto。
GitHub官方SVG的原始尺寸远大于伪元素设置的1.1em宽高，background-size: auto会让图标以原始尺寸渲染，仅有极小部分边缘被裁切显示在小尺寸容器中，视觉上就表现为颜色渲染异常。

修复方案 #

在覆盖background属性时，同步显式声明background-size属性即可，完整可运行代码如下：

/* 多站点链接伪元素公共样式 */
a[href^="https://github.com/"]::before,
/* 其他站点链接规则 */
a[href^="https://www.mozilla.org/"]::before {
  content: '';
  background: url('../image/dino.svg') no-repeat center;
  background-size: contain;
  display: inline-block;
  height: 1.1em;
  width: 1.1em;
  margin-right: 0.3em;
  vertical-align: text-bottom;
}

/* GitHub链接单独覆盖样式 */
a[href^="https://github.com/"]::before {
  background: url('../image/github.svg') no-repeat center;
  background-size: contain;
}

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