如何使用 CSS :after 将 Glyphicon 元素添加到输入答案

【问题标题】：How Can I Use CSS :after to Add a Glyphicon Element to an Input如何使用 CSS :after 将 Glyphicon 元素添加到输入
【发布时间】：2017-09-10 17:30:07
【问题描述】：

我有一个 <input> 元素，我无法修改它周围的 HTML，但我想在其中添加一个字形图标 (<i class="glyphicons glyphicons-some-icon"/>)。我希望用 CSS 来做，但我似乎无法让 :after 工作。我认为类似以下内容会生成该元素：

#my-input {
    content: attr(class, 'glyphicons glyphicon-some-icon'); 
    content: '<i/>'; 
}

但事实并非如此。任何了解:after 的人能否更好地解释我如何使用:after 生成所需的<i class="glyphicons glyphicons-some-icon"/>？

【问题讨论】：

你不能。 :before 和 :after 伪元素被插入到元素中。 <input> 元素不能有子元素，因此不能有伪元素子元素。
您可以通过查看 Bootstrap 的样式表找到这些：stackoverflow.com/questions/19740700/…
纯 CSS 不可能做到这一点 stackoverflow.com/questions/2587669/…

标签： css glyphicons

【解决方案1】：

:before 和 :after 应用于容器内，这意味着您可以将它用于带有结束标记的元素。see explanation

见下面的例子。实现你想要的。

注意：父位置是相对的，因此冷冻的绝对位置将根据父位置处于顶部和底部。

.myInput:after {
  font-family: FontAwesome;
  content: "\f0a9";
  position: absolute;
  top: 3px;
  left: 7px;
}
.my{
position:relative
}

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

<div class="my">

  <div class="myInput">
    <input type="text" />
  </div>

</div>

或

.mystyle:before {
  font-family: FontAwesome;
  content: "\f0a9";
}
.myInput {
  position: relative;
}
.myInput div {
  position: absolute;
  top: 3px;
  left: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myInput">
  <input class="mystyle" type="text" value="" />
  <div class="mystyle"></div>
</div>

【讨论】：

【解决方案2】：

这可以实现你想要做的事情。

[data-icon]:before {
  font-family: icons;
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
  position: absolute;
}

<h2 id="stats" aria-hidden="true" data-icon="&#x21dd;">
<input type="text"/>
</h2>

或

.glyphicon-search:before {
    position: absolute;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="glyphicon glyphicon-search">
<input type="text"/>
</div>

【讨论】：