How to fix difference display of pseudo element between Macbook and Windows Desktop?-CodePudding

How do you do? I have converted XD file to html, css code. I checked on my PC(windows), but I didn't check on Macbook. Details: I coded button and used pseudo element to display right arrow at the right side.

Here is my code.

HTML

<button ><a href="#">Register</a></button>

CSS

.register{
    background-color: #FF6D1F;
    border-radius: 10px;
    color: white;
    padding: 20px 50px;
    margin-right: 5%;
    border: none;
    position: relative;
    box-shadow: 1px 5px 0px #8b3507;
}
.register::after{
    content: '\1F892';
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
}

This register button displayed triangle on Windows, but step shape on Macbook. I tried many times to fix difference.

Could you help me how to fix and display the same shape-triangle?

CodePudding user response：

You can use browserstack to test your code in different devices such as mac and ios

CodePudding user response：

have a look at these unicodes https://www.toptal.com/designers/htmlarrows/

if you want to use of unicode I don't know exactly.

I suggest you to use of SVG or img to put icon on your button. you can download svg icon from flatiIcon or you can use of featherIcon or font awesome or ....