PHP从入门到精通，037第三章HTML5+CSS3—

PHP从入门到精通，037第三章HTML5+CSS3——CSS3

作者: 极客研习社 | 来源:发表于2019-05-21 12:31 被阅读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>