Question

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

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

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

尝试过几个站点，以检查是否应尝试使用\279C或→并在页面中定义<meta charset="utf-8"/>。做完了一切。似乎没有任何作用。

任何有关指导的帮助都将非常重要。

更新：

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

Answer 1

归结为演示问题所需的绝对最低限度时，您的代码如下所示：

slides_count2

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

但是<input type="submit" class="custom-button" value="Sign in"/>元素没有内容，因此它们也没有任何<input>或::before内容。

解决方案是将按钮变成具有内容的::after。

<button>

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

Answer 2

您可以在这里找到我的Codepen解决方案：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;
}

UI中未显示特殊字符

2 个答案: