1.像input,img这种单标签加伪元素::before,::after无效,如果想在input框里面加像放大镜的这样图片,可以给input框外侧套一层div,在div里面在放一个图片设置父相子绝,定位到input框里面.
2.如图下给input加伪元素,不生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
input {
position: relative;
}
input::after {
position: absolute;
left: 0;
top: 0;
content: '';
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<input class="iconfont icon-icon-test1" type="text">
</body>
</html>
2-1运行效果图
3.如下正确的写法
3-1伪元素写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
div {
position: relative;
display: inline-block;
}
div::after {
position: absolute;
right: 0;
bottom: 0;
content: '\e63c';
font-family: 'iconfont';
font-size: 20px;
}
</style>
</head>
<body>
<div>
<input type="text">
</div>
</body>
</html>
3-2给i标签添加类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
div {
position: relative;
display: inline-block;
}
div .icon-icon-test1 {
position: absolute;
right: 0;
top: 1px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<input type="text">
<i class="iconfont icon-icon-test1"></i>
</div>
</body>
</html>
3-3 Unicode字体写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font/iconfont.css">
<style>
div {
position: relative;
display: inline-block;
}
div .search {
position: absolute;
font-family: 'iconfont';
right: 0;
top: 1px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<input type="text">
<i class="iconfont search"></i>
</div>
</body>
</html>
3-4 运行效果图如下