UI 中未显示特殊字符

Question

我有以下效果要添加到我的按钮之一：

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

除特殊字符外的效果已成功应用于我的按钮。

尝试了几个网站来检查我是否应该尝试使用 9C 或 → 并在我的页面中定义 <meta charset="utf-8"/>。完成了一切。似乎没有任何效果。

任何指导方面的帮助都意义重大。

更新:

我有一个 fiddle，它与我在我的项目中使用的代码相同。

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>

Answer 2

您可以在这里找到我的代码笔解决方案：https://codepen.io/GarrettManley/pen/GYYoyG

正如 Lister 先生所说，解决方案是将按钮变成 <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: '92';
  display: none;
}

UI 中未显示特殊字符

Special character not getting displayed in UI

html

css

character-encoding

special-characters