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.
Any clue what could be done?
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
}