我有一个 <input>
元素,我无法修改它周围的 HTML,但我想在其中添加一个字形 ( <i class="glyphicons glyphicons-some-icon"/>
)。我希望用 CSS 做到这一点,但我似乎无法获得 :after
上类。我认为类似以下内容会生成该元素:
#my-input {
content: attr(class, 'glyphicons glyphicon-some-icon');
content: '<i/>';
}
但事实并非如此。谁能看懂:after
更好地解释我如何生成所需的 <i class="glyphicons glyphicons-some-icon"/>
使用 :after
?
最佳答案
:before and :after are applied inside a container, which means you can use it for elements with an end tag.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>
关于css - 如何使用 CSS :after to Add a Glyphicon Element to an Input,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33207269/