伪元素 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7     /*
 8     使用伪元素来表示元素中的一些特殊的位置
 9     
10     1.为p中第一个字符来设置一个特殊的样式
11     */
12    p:first-letter{
13        color: red;
14        font-size: 20px;
15    }
16    /*
17    2.为p中的第一行设置一个背景颜色为黄色
18    */
19   p:first-line{
20       background-color: yellow;
21   }
22   /*
23   3.before表示元素最前边的部分
24   一般before都需要结合content这个样式一起使用
25   通过content可以向before或after的位置添加一些内容
26   */
27   p:before{
28       content: "我会出现在整个段落的最前边";
29       color: red;
30   }
31   /*
32   4.after表示元素最后边的部分
33   */
34  p:after{
35      content: "我会出现在整个段落的最后边";
36      color: orange;
37  }
38         </style>
39     </head>
40     
41     <body>
42         <p>我是一个伪元素</p>
43     </body>
44 </html>

 

posted @ 2019-07-09 21:22  zuiaimiusi  阅读(135)  评论(0)    收藏  举报