css

Edge Browser on Windows adds (wrong) background color

I have a website, where I added an arrow before the links:

/*** Add icon to links ***/
div.entry-content p a::before {
    content: "\2197";
    padding-right: 2px
}
<div class="entry-content">
  <p>
    <a href="https://www.example.com">example.com</a>
  </p>
</div>

This works fine on Safari (iOS, iPadOS, macOS) and even on Edge on iOS and macOS. Unfortuntely, in Edge on Windows (client and server), the browser „adds“ a background color which makes the look of the website odd.

enter image description here

Any clue what could be done?

Solution

  • As mentioned by @Huang and linked by @DBS here: https://stackoverflow.com/a/38452396/10594231

    This could be fixed by appending the unicode variation selector VS15 to the character which forces it to be rendered as text rather than emoji.

    div.entry-content p a::before {
    content: "\2197";
    padding-right: 2px
}

    would become

    div.entry-content p a::before {
    content: "\2197\FE0E";
    padding-right: 2px
}

    Edit: Edge and some versions of Chrome ignore variation selectors for some reason. The below solution is tested and working on Edge, Chrome and Firefox

    div.entry-content p a::before {
    font-family: monospace !important;
    content: "\2197\FE0E";
    padding-right: 2px
}