::after SVG showing in Firefox, but not Chrome - css

Question

I am wanting to implement an svg using the ::after pseudo-element. When I run my code, it works perfectly in Firefox,
but in Chrome the svg (down arrow) is non-existent.
There were quite a few questions and answers regarding this problem, but every one of them addressed a code issue that others were having and did not pertain to me.
My code follows:
HTML
<div class="select-box">
<div class="acronym">DRY</div>
<div>Don't Repeat Yourself</div>
</div>
CSS
.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);
}
I appologize. I wanted to include a codepen of the issue, but that would involve asset hosting to include the svg, which is a Pro plan. I am not a professional - just an amateur passionate about coding. Thanks for any help you can offer-up.

Answer 1

This snippet works - albeit with a different arrow SVG - on Chrome/Edge/Firefox on Windows 10. SO (imgur) does not allow SVGs to be loaded so the pointer SVG is hosted as a temporary one and won't be there forever.
.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;
}
.select-box .acronym {
width: 55px;
color: #c29b69;
}
.select-box::after {
content: "";
display: block;
background: url("https://ahweb.org.uk/temp2.svg");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 22%;
width: 3.2rem;
top: 20px;
right: 0px;
transform: rotateX(180deg);
}
<div class="select-box">
<div class="acronym">DRY</div>
<div>Don't Repeat Yourself</div>
</div>
So what can be the problem? The only thing I can think of is that there is some problem either with using a 3d rotation on your particular SVG (?backface-visibility - though the default should be set at visible) or the rotation about the X axis is flipping the SVG out of the containing element.
Could you try first not having any transform on the pointer to see if it is visible, and then trying a rotate(180deg) instead (i.e. about the z-axis) so there's no worry about what is happening, or not, in 3D and so that the image stays in place rather than moving down.

Answer 2

As A Haworth pointed out, it was a reference issue. I was applying the svg via the background:url(); property for the first time. It worked well with just an html and css file with background: url("img/arrow.svg"). But the trouble was that I was trying to reference the svg the same way when using node/sass. The proper way to reference it in that case was background: url("../img/arrow.svg"). Thanks for the heads-up A Hawthorn. That led me to the answer here,