如何使用CSS：将Glyphicon元素添加到输入之后

Question

我有一个<input>元素，我无法修改其周围的HTML，但我想在其中添加一个glyphicon（<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"/>？

Answer 1

：和之前：后一个容器中，这意味着可以 使用它与一个结束标记元素中施加。 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>

OR

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

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

OR

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