第十六节 伪类和伪元素选择器 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         <!-- 伪类 -->
 8         .link{
 9             font-size: 30px;
10             text-decoration: none;
11             color: red;
12         }
13         .link:hover{
14             color: gold;
15         }
16         /*伪元素*/
17         .box1:before{
18             content: "前面的文字";
19             color: blue;
20         }
21 
22         .box2:after{
23             content: "后面的文字";
24             color: pink;
25         }
26     </style>
27 </head>
28 <body>
29     <a href="https://wwww.baidu.com" class="link">百度链接</a>
30     <div class="box1">这是第一个div</div>
31     <div class="box2">这是第二个div</div>
32 
33 </body>
34 </html>

 

posted @ 2020-03-05 15:39  kog_maw  阅读(100)  评论(0)    收藏  举报