::before和::after 常见的用法

 

 

.lizi:after{
　　content: "I'M after";             /*插入字符串*/
　　content: "attr(id)";              /*插入当前元素属性*/
　　content: url(/path/to/image.jpg); 　　　　  /*插入图片*/
　　content: counter(li);             /*插入计数器*/
　　content: "";                      /*啥也不插*/
}

 1     <div class="triangle">
 2         <input type="text">
 3     </div>
 4     <style type="text/css">
 5         .triangle input{
 6             height: 30px;
 7             width: 200px;
 8             border-radius: 4px;
 9             border: 1px solid #ccc;
10         }
11         .triangle{
12             width: 200px;
13             position: relative;
14         }
15         .triangle:after{
16             position: absolute;
17             top: 12px;
18             right: 5px;
19             content: "";
20             width: 0;
21             height: 0;
22             border: 8px solid transparent;
23             border-top-color: red;
24         }
25     </style>