Специальный символ не отображается в пользовательском интерфейсе

Question

У меня есть следующий эффект, который нужно добавить к одной из моих кнопок:

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

Эффекты, кроме специального символа, успешно применяются к моей кнопке.

Попробовал несколько сайтов, чтобы проверить, следует ли мне использовать \279C или → и чтобы на моей странице было определено <meta charset="utf-8"/>.Сделано все.Кажется, ничего не работает.

Любая помощь в руководстве будет много значить.

ОБНОВЛЕНИЕ :

У меня есть скрипка это тот же код, который я использовал в своем проекте.

Answer 1

Вы можете найти мое решение для кодов здесь: https://codepen.io/GarrettManley/pen/GYYoyG

Как заявил мистер Листер, решение состоит в том, чтобы превратить кнопку в <button>

Вот мои модификации вашего кодаот jsfiddle.

<button type="submit" style="border-radius:20px; width:150px; margin-top:25px;" class="btn btn-primary custom-button" onclick="sessionStorage.setItem('fileName','');">Sign In</button>

Что касается CSS, вот мое толкование того, что, я думаю, вы собирались сделать.Я включил только минимум здесь, потому что я не был полностью уверен, каков был ожидаемый результат.

.custom-button:hover {
  background-color: #219025 !important;
  border-color: #219025 !important;
}

.custom-button:hover::after {
  display: inline;
  padding-left: 8px;
}

.custom-button::after {
  content: '\2192';
  display: none;
}

Answer 2

Когда сводится к абсолютному минимуму, необходимому для демонстрации проблемы, ваш код выглядит так:

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

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

, но элементы <input> не имеют содержимого, поэтому они также не имеют содержимого ::before или ::after.

Решение состоит в том, чтобы превратить кнопку в <button>, который имеет содержимое.

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

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