html - 使用 :after 将 Font Awesome 图标添加到输入类型

Question

我正在尝试在输入字段上使用 :after CSS，但它不起作用。

我做错了什么？我应该使用另一个选择器吗？

._ght{
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}
._ght input[type="text"]{
  width: 48%;
  line-height: 32px;
  font-size: 26px;
  border: solid 1px #94a6ae;
}
._ght input:after{
  font-family: FontAwesome;
  content: "\f06e";
}

<div class="_ght">
  <input type="text" name="">
</div>	

这里的例子:

Answer 1

正如@zgood 所写::before 和 :after 仅适用于 html 元素。

我建议使用额外的 span 在该输入后显示您的图标。

  <span class="addon"></span>

无需额外的 HTML，将您的图标添加到输入容器的 :after 元素中。

._ght{
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 10px;
}
._ght input[type="text"]{
  width: 48%;
  line-height: 32px;
  font-size: 26px;
  margin-left: 10px;
  border: solid 1px #94a6ae;
}
._ght:after{
      font-family: FontAwesome;
      font-size: 25px;
      content: "\f06e";
      border: 1px solid grey;
      padding: 6px 4px 3px 4px;
      margin-left: -5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="_ght">
  <input type="text" name="">
</div>