如何使用 CSS :after 向输入添加 Glyphicon 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33207269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Can I Use CSS :after to Add a Glyphicon Element to an Input
提问by machineghost
I have an <input>element, and I can't modify the HTML around it, but I want to add a glyphicon (<i class="glyphicons glyphicons-some-icon"/>) inside of it. I was hoping to do it with CSS, but I can't seem to get :afterto work. I thought something like the following would generate that element:
我有一个<input>元素，我无法修改它周围的 HTML，但我想在其中添加一个字形 ( <i class="glyphicons glyphicons-some-icon"/>)。我希望用 CSS 来做，但我似乎无法开始:after工作。我认为类似以下内容会生成该元素：
#my-input {
content: attr(class, 'glyphicons glyphicon-some-icon');
content: '<i/>';
}
but it doesn't. Could anyone who understands :afterbetter explain how I can generate the desired <i class="glyphicons glyphicons-some-icon"/>using :after?
但事实并非如此。谁能:after更好地理解我如何生成所需的<i class="glyphicons glyphicons-some-icon"/>使用:after？
回答by Keval Bhatt
:beforeand :afterare applied inside a container, which means you can use it for elements with an end tag.see explanation
:before和:after应用于容器内，这意味着您可以将它用于带有结束标记的元素。看说明
See below example. to achieve what you want.
见下面的例子。达到你想要的。
NOTE: parent position is relative so that chilled absolute position will take top and bottom depending on parent.
注意：父位置是相对的，因此冷却的绝对位置将根据父位置占据顶部和底部。
.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>回答by Hil
This could achieve what you are trying to do.
这可以实现您正在尝试做的事情。
[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="⇝">
<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>