Special character not getting displayed in UI

Question

I have the following effect that is to be added to one of my buttons:

.custom-button:after {
    content: "➜";
    position: absolute;
    opacity: 0;
    top: 14px;
    right: -20px;
    transition: 0.5s;
}

The effects except the the special character are successfully getting applied to my button.

Tried few sites to check that I should try using \279C or → and to have <meta charset="utf-8"/> defined in my page. Done everything. Nothing seems to work.

Any help on guiding would mean a lot.

UPDATE:

I have a fiddle which is the same code I have used in my project.

Answer 1

When boiled down to the absolute minimum required to demonstrate the problem, your code looks like this:

.custom-button::after {content:'➜';}

<input type="submit" class="custom-button" value="Sign in"/>

but <input> elements don't have content, so they don't have any ::before or ::after content either.

The solution is to turn the button into a <button>, which does have content.

.custom-button::after {content:'➜';}

<button type="submit" class="custom-button">Sign in</button>