CSS-05-伪类及伪元素选择器

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             
 8             .ha{
 9                 text-align: center;
10                 width: 200px;
11                 height: 200px;
12                 background-color: green;
13             }
14             /*hover:鼠标悬停后有动态解释效果*/
15             .ha:hover{
16                 width: 500px;
17                 height: 500px;
18                 background-color: yellowgreen;
19             }
20             
21             /*after:在元素里面的尾部插入内容*/
22             .ha:after{
23                 content: '!!!!';
24                 background-color: red;
25             }
26             
27             /*before:在元素里面的头部插入内容*/
28             .ha:before{
29                 content: '$$';
30                 color: darkblue;
31             }
32         </style>
33     </head>
34     <body>
35         <div class="ha" >伪类及伪元素选择器</div>
36     </body>
37 </html>