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

Question

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

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

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

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

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

< Сильный > UPDATE :

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

html css character-encoding special-characters

1

Mike 23 Окт 2018 в 18:48

Answer 1

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

.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>

1

Mr Lister 23 Окт 2018 в 16:39

Answer 2

Вы можете найти мое решение с кодом здесь: 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;
}

1

Garrett Manley 23 Окт 2018 в 17:40

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

2 ответа

Похожие вопросы

Новые вопросы

html