Css ：：在Firefox中显示SVG后，但不显示Chrome

我想使用：：after伪元素实现svg。当我运行我的代码时，它在Firefox中运行得非常好，

但是在Chrome中，svg（向下箭头）是不存在的

关于这个问题有相当多的问题和答案，但是每个问题都解决了一个代码问题，其他人都有，与我无关。 我的代码如下：

HTML

 <div class="select-box">
     <div class="acronym">DRY</div>
     <div>Don't Repeat Yourself</div>
 </div>

---

我道歉。我想包含一个关于这个问题的代码笔，但这需要资产托管来包含svg，这是一个专业计划。我不是一个专业人士，只是一个热衷于编码的业余爱好者。感谢您提供的帮助。

此代码段在Windows 10上的Chrome/Edge/Firefox上运行，尽管使用了不同的箭头SVG。因此（imgur）不允许加载SVG，因此指针SVG作为临时SVG托管，不会永远存在

。选择框{
位置：相对位置；
显示器：flex；
填充：8px 25px；
字体系列：“双体船”，“Arial”，无衬线；
字体大小：20px；
背景色：无；
边框：实心1px黑色；
边界半径：12px；
颜色：黑色；
光标：指针；
}
.选择框.首字母缩写{
宽度：55px；
颜色：#c29b69；
}
.选择框：：之后{
内容：“；
显示：块；
背景：url（“https://ahweb.org.uk/temp2.svg");
背景尺寸：包含；
背景重复：无重复；
位置：绝对位置；
身高：22%；
宽度：3.2rem；
顶部：20px；
右：0px；
变换：rotateX（180度）；
}

干的
不要重复你自己

正如霍沃斯所指出的，这是一个参考问题。我是通过后台应用svg的：url（）；这是第一次。它只需要一个背景为url（“img/arrow.svg”）的html和css文件就可以很好地工作。但问题是，在使用node/sass时，我试图以相同的方式引用svg。在这种情况下引用它的正确方法是background:url（“../img/arrow.svg”）。谢谢你给我一颗山楂。这让我得到了答案，

嘿，A。我尝试了这些建议，但运气不好，但谢谢你。我把代码放在GitLab上。如果在live server上运行该代码，则会出现问题。还有其他建议吗？谢谢。我已经复制了您的arrow svg，并在代码段中使用了它。它工作正常，我看不到问题-唯一的问题是如果您通过系统复制和编辑代码段，那么箭头隐藏在代码段编辑器的“结果”标题下-但是如果您只在此处运行代码段，您可以看到它。那么-还有什么可能造成你的问题呢？PS-我在Windows 10的Chrome/Edge上试用过。范围缩小了。svg使用标准文件设置（索引、样式）可以正常工作，但当它放置在包含node_模块和sass文件夹的文件中时，svg不会显示。最后有什么建议吗？听起来好像没有被正确引用。

.select-box {
    position: relative;
    display: flex;
    padding: 8px 25px;
    font-family: 'Catamaran', 'Arial', sans-serif;
    font-size: 20px;
    background-color: none;
    border: solid 1px black;
    border-radius: 12px;
    color: black;
    cursor: pointer;

    & .acronym {
        width: 55px;
        color: #c29b69;
    }
}

.select-box::after {
    content: "";
    display: block;
    background: url("/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 22%;
    width: 3.2rem;
    top: 20px;
    right: 0;
    transform: rotateX(180deg);
}