Internet Explorer pseudo elements with background image

All versions of modern Internet Explorer (8-11) are displaying an ":after" pseudo element with a background image in it very strangely. It's supposed to be a line of dots that go straight underneath the topnav, as a continuation for the "heart monitor blip". Instead they show up like this:

Here is the site itself: http://www.makingthedifference.ca/

The background image itself is an svg, which I know is not fully supported by all IEs, but according to my tests on BrowserStack, it's being uploaded and showing up fine in IE 9, 10 and 11.

In the IE console on BrowserStack, the :after elements are being completely crossed out, as if IE is finding fault with them, and the dots are showing up unevenly (as pictured above). I do have multiple pseudo elements in there because the site is mobile responsive.

Shows up fine with Chrome, Firefox and Safari.

Also, unfortunately, I can't use border-bottom dotted, the dots are not the right shape.