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>
