PHP从入门到精通，037第三章HTML5+CSS3——CSS3
2019-05-21 本文已影响1人
极客研习社
（一）新增的伪类选择器:before和:after
:before——在盒子的内部的前面插入一个行显示的盒子
:after ——在盒子的内部的后面插入一个行显示的盒子
注意：这两个选择器必须和content一起使用，即使没有内容插入，也要写个空字符串。
<head>
<style type="text/css">
input {
float:left;
height:20px;
}
div:before {
content:"";
width:25px;
height:25px;
background:url(./images/tu1.png) no-repeat;
display:line-block;
float:left;
}
div:after {
content:"";
width:25px;
height:25px;
background:url(./images/tu2.png) no-repeat;
display:line-block;
float:left
}
</style>
</head>
<body>
<div>
<input type="text" name="sousuo">
</div>
</body>
